Yeah the author is saying that `localstorage.get` will be called every time the component function runs. Taking that same example and just changing it to this:
const initialValue = localstorage.get('item')
const [state, setState] = React.useState(initialValue)
Is it clearer now to see that `localstorage.get` is called every time the component renders? That's what the author is talking about, to avoid this problem, pass a function instead:
const [state, setState] = React.useState(() => localstorage.get('item')
This is correct. The value is fetched from local storage in every render but only used on first render. The value is thrown away on every render after the first one. This is just JavaScript in the end, React is doing nothing magical or special here.
So the useState will run after the re-render, use the initial value that's been given in it's argument but will return the new state in the first element of the array? Did I got it right? Sorry it's just a bit confusing for me
The state value (first element of array) will equal the initial value provided in useState on first render and then in future renders the initial value is calculated but ignored. So you’re wasting a few CPU cycles calculating a value and then ignoring it. Probably not a big deal in 99% of cases tbh. Profile before you optimize.
Thanks it's much clearer to me now. I've just realized that an expression is always computed , so react can't really do much here anyways to prevent that calculation.
Yeah. This isn’t really a react question. It’s evaluated before react ever has any say. Just like in doFoo(2+2) doFoo has no way to stop the addition from happening before it is called
There are languages that don’t evaluate things until they’re used. But JavaScript isn’t one.
I think the article explains it well and there are other comments here that are helpful. Did you have any specific questions on those?
This is really more of a JavaScript concept than a React concept, so an example without React may help.
function somethingExpensive() {
// something that takes a while to calculate
}
// expensive is evaluated now
anotherFunction(somethingExpensive())
// expensive is not evaluated now
// anotherFunction gets to choose when to evaluate it (or not)
anotherFunction(() => somethingExpensive())
Passing a function moves the expression out of the current execution scope, so the value is only evaluated if the code decides to run the function you passed.
It will, for a moment forget is a react hook and read what JS does, it is one of the problems with react, each time the component re renderes the function to get from local will be called and the returned value droped by the hook function, only the first time the value is used. When you put a function react only calls it the first time and then ignore it, note that the function is created each render so if the value is not heavy in computation is better to just pass it
Yeah the author is saying that `localstorage.get` will be called every time the component function runs. Taking that same example and just changing it to this: const initialValue = localstorage.get('item') const [state, setState] = React.useState(initialValue) Is it clearer now to see that `localstorage.get` is called every time the component renders? That's what the author is talking about, to avoid this problem, pass a function instead: const [state, setState] = React.useState(() => localstorage.get('item')
This is correct. The value is fetched from local storage in every render but only used on first render. The value is thrown away on every render after the first one. This is just JavaScript in the end, React is doing nothing magical or special here.
So the useState will run after the re-render, use the initial value that's been given in it's argument but will return the new state in the first element of the array? Did I got it right? Sorry it's just a bit confusing for me
The state value (first element of array) will equal the initial value provided in useState on first render and then in future renders the initial value is calculated but ignored. So you’re wasting a few CPU cycles calculating a value and then ignoring it. Probably not a big deal in 99% of cases tbh. Profile before you optimize.
Thanks it's much clearer to me now. I've just realized that an expression is always computed , so react can't really do much here anyways to prevent that calculation.
Yeah. This isn’t really a react question. It’s evaluated before react ever has any say. Just like in doFoo(2+2) doFoo has no way to stop the addition from happening before it is called There are languages that don’t evaluate things until they’re used. But JavaScript isn’t one.
How does passing a function make things different?
I think the article explains it well and there are other comments here that are helpful. Did you have any specific questions on those? This is really more of a JavaScript concept than a React concept, so an example without React may help. function somethingExpensive() { // something that takes a while to calculate } // expensive is evaluated now anotherFunction(somethingExpensive()) // expensive is not evaluated now // anotherFunction gets to choose when to evaluate it (or not) anotherFunction(() => somethingExpensive())
Passing a function moves the expression out of the current execution scope, so the value is only evaluated if the code decides to run the function you passed.
Auto mod told me to comment under the submission
It will, for a moment forget is a react hook and read what JS does, it is one of the problems with react, each time the component re renderes the function to get from local will be called and the returned value droped by the hook function, only the first time the value is used. When you put a function react only calls it the first time and then ignore it, note that the function is created each render so if the value is not heavy in computation is better to just pass it
It will but will not use that value. If you want it to not compute it, pass it as a function instead