Updated variable is not rendered-CodePudding

I am using react.

import React from 'react';

function Scheduler(props) {
    var remainingHours = 5;
    const TimelineHeaderItem = () => {
        remainingHours = 8;
        console.log(remainingHours) // prints 8
        return <></>;
    }
    const name = () => {
        console.log('fetching remaining hours=>', remainingHours); // prints 5
    }

    return (
       <>
        <TimelineHeaderItem /> 
        {name()} 
       </>
    );
}
export default Scheduler;

As you can see, I have changed the value of remainingHours to 8 in TimelineHeaderItem.
But when I access that value in name function, then it prints 5 which is the previous one.
Why is this so ? and how can I access updated value.

CodePudding user response：

In React, what is displayed on the screen should flow from the state of the component. Changing the state of the component tells React to re-render the component. Simply reassigning a variable by itself, like you're doing, has no side-effects.

Also, the TimelineHeaderItem doesn't make sense - it's not returning anything. If you want it to change the remainingHours, use a plain function for that, rather than trying to render it as a component.

On a similar note, if you want name to show the remaining hours on the screen, make it a component instead of calling it inside the JSX. (or remove it entirely and just interpolate the remainingHours into the JSX.) Something along the lines of:

const App = () => {
    const [remainingHours, setRemainingHours] = React.useState(5);
    const changeHours = () => setRemainingHours(8);
    return <div>
        <button onClick={changeHours}>click</button>
        <div>{remainingHours}</div>
    </div>;
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

CodePudding user response：

Normal variables do not create rerenders.

State variables are one of the variables responsible for telling react to rerender

At the time, when TimelineHeaderItem updated the variable, the state has already rendered and the name function has already called, so you cant see the variable value change.

Here is the result of console.log()

You have to use the variables as a state variables as they causes rerenders.

import React, {useState, useEffect} from 'react';

function Scheduler(props) {
    const [remainingHours, setHours] = useState(5); //<-- this is state
    const TimelineHeaderItem = () => {
        setHours(8);
        console.log(remainingHours) // prints 8
    }
    useEffect(() => { 
        TimelineHeaderItem(); //<-- this is useEffect, it runs on first render if provided with no dependecies
    },[]);
    
    const name = () => {
        console.log('fetching remaining hours=>', remainingHours); // prints 5
    }

    return (
       <>
        {/*<TimelineHeaderItem />  <--- No need of this now */}
        {name()} 
       </>
    );
}

u can read more about hooks and their functions here https://reactjs.org/docs/hooks-state.html export default Scheduler;