How to setState false when a component rendered?

I am new to application development. As seen below when "value" is false, I want the "Test" component to be rendered and the loading state to be false. But when I do as in the codes below, I get the error in the picture below. How do I set state to false without getting an error when this test component is rendered on the page?

import React, { useState } from 'react'
import { Text, View } from 'react-native'


const WordPage = () => {

    let value = false

    const [loading, setLoading] = useState(false)

    const Test = () => {
        setLoading(false)
        return (
            <Text>OFFLINE</Text>
        )
    }

    return (
        <View>
            {value ?
                <Text>ONLINE</Text>
                :
                <Test />
            }
        </View>
    )
}

export default WordPage

CodePudding user response：

You should be using the useEffect hook for this. useEffect is used for running side effects and runs after the component has rendered.

Also, you don't need this additional component. You can simply use the useEffect hook in your parent component.

CodePudding user response：

You can pass a callback as prop and call it once Test component is rendered.

import React, { useEffect, useState } from "react";
import { Text, View } from 'react-native'

const Test = ({ onRendered }) => {
  useEffect(onRendered, []);
  return <Text>OFFLINE</Text>;
};

const WordPage = () => {
  let value = false;
  const [loading, setLoading] = useState(false);

  return (
    <View>
      {value ? (
        <Text>ONLINE</Text>
      ) : (
        <Test
          onRendered={() => {
            setLoading(false);
          }}
        />
      )}
    </div>
  );
};

export default WordPage;