reactjs - state rendering in react.js

Question

I have a very simple question which has been bugging me. I am relatively new to react and having issues with state. If I have a component that creates a state variable like below

const [state, setState] = useState(null)

and let in the code I do something like this...

setState(50)

Changing the state forces a re-render which in turn re-initializes the state variable as null. What am I doing wrong? I want the app the re-render when state changes and leave state as 50 in this example but when it re-renders it re-initializes the state as null. Super strange.

actual code...

const ConnectBackend = props => {
    const [moisture, setMoisture] = useState(null)

    let temp = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var i = 0;
    function myLoop() {
        setTimeout(function() {
            setMoisture(temp[i]);
            console.log(moisture)
            i++;
            if (i < 10) {
                myLoop();
            }
        }, 3000)
    }
  
    myLoop(); 
}

Answer 1

Where are you using the setState? If you do it like so, it shouldn't be an issue.

const App = () => {
  const [state, setState] = React.useState(null)
  
  React.useEffect(() => {
    setState(50);
  }, []);
  
  return <p>{state}</p>
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>