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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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 thename
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;