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>

If you did it like this, this will end in too many rerenders, as after the state update the component function will be called again and update the state again, then call itself again and so on -> loop

// DO NOT DO THIS
const App = () => {
  const [state, setState] = useState(null);

  setState(50);

  return <p>Hello CodeSandbox</p>;
}

UPDATE: After reading your comments and the updated code. You might want to get into more reactive way of dealing with this. Go check this out

 const { useEffect, useState, useMemo } = React; let temp = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const ConnectBackend = (props) => { const [i, setI] = useState(0); const [myInterval, setMyInterval] = useState(); const moisture = useMemo(() => temp[i], [i]); useEffect(() => { const interval = setInterval(() => { setI((oldI) => oldI + 1); }, 1000); setMyInterval(interval); return () => { clearInterval(interval); }; }, []); useEffect(() => { if (i > 8) clearInterval(myInterval); }, [myInterval, i]); return <p>{moisture}</p>; }; ReactDOM.render(<ConnectBackend />, 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>