Why react does not show updated value even if state changes?

Question

I am just experimenting with ReactJS and came to an issue. I just want to update a variable according to the value of BootstrapSwitchButton. After some time of debugging, I came to a conclusion that variable is updating as needed but is not being displayed inside react rendering part but shows updated value from a function. My code is:

  const [state, setState] = useState(false);
  let btnValue;
  
  function changeValue(value)
  {
    console.log("Value: " + value)
    btnValue = value;
    setState(value); 
    console.log("Button Value at function: " + btnValue)
  }
  return (
    <div className="App">
      <BootstrapSwitchButton checked={true} onlabel="On" offlabel="Off" width={100} onChange={changeValue}/>
    {console.log("Button Value: " + btnValue)}
    </div>
  );
}

I just want to know that what's happening here? Why react does not show updated value even if state changes?

Answer 1

You should not use local variables in a component context since they are not covered by state lifecycle. React does not know of this variable and hence does not "track" it. Instead of btnValue, use your state, since then react will take care of any actions associated with changes in your component. You can read more about that in the react state and lifecycle page.

function changeValue(value)
  {
    console.log("Value: " + value)
    setState(value); 
    console.log("Button Value at function: " + value)
  }
return (
    <div className="App">
      <BootstrapSwitchButton checked={true} onlabel="On" offlabel="Off" width={100} onChange={changeValue}/>
    {console.log("Button Value: " + state)}
    </div>
  );