If i need for a counter variable, that need to persist even if my function-component is re-render,
there is a way, without using, in React for example, state or ref, to let my updated value inside the closure to persist throught renders?
You may be able to use simply global variable, but need to force updating ui which I think is against react concept.
Related
Is it still possible to render variables in react? Trying to use a more lightweight method of storing data on a component, but variables don't seem to render anymore in react. Is useRef the new method for variables or is it still possible in basic let variables.
Here is an example of variables not rendering in react:
https://codesandbox.io/s/serene-galileo-ml3f0?fontsize=14
You have a misconception about how React handles state. The reason why normal variables don't seem to work in React is actually an optimization. React only rerenders the elements on your page when absolutely necessary. The way you tell React "hey, my state changed, can you update the page to reflect that" is by using state variables. In your example, React only rerenders the elements that reference the b variable when you update it using setB. However, it does not rerender the elements that represent a when you update it using a++, because it has no way to detect that a was updated.
useState is actually more efficient than local variables, because it rerenders only what is necessary.
see virchau13's answer.
Although saving to a state is more intensive than a simple variable assignment, you have to take into account that what you see on the screen will only change via renders. So if you wanted to see the display increment on the screen, it will only do so via renders, which is most easily achieved through state changes.
I had this question during using context in ReactJS.
"context" is used to save global values which are used in children components.
Also localStorage is used to save global values.
So we can use both in same purpose.
What can we do better using context than using localStorage in ReactJS?
Read the docs before writing a question :)
"Context lets us pass a value deep into the component tree without explicitly threading it through every component". It's React specific and the components rerenders when the values change.
https://reactjs.org/docs/context.html
LocalStorage is Web API and saves data in the browser. Changing localStorage won't trigger a rerender.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
It depends on what you need, read the docs and you will understand better.
I'm familiar with useState hook for storing variables that change and need to reload the component. Are variables not local to each function call? For example, I have a functional component that I passed ticket information to. I take that information store it in a variable and pass it to another screen. That component is render in a flat list depending on which one is called I want to store that value and pass it to another screen. My problem is, that value is getting stored in the local object but only the value of the last item rendered not the one pressed. Here is my code:
If I save ticket from params, update it with the "siteCode", and pass it in the params of the onPress event, I don't get the results i'm looking for. If i pass siteCode outside of the custom object I get the results I'm looking for. I just want to understand what I'm missing here. Do i still need to use the useState hook even though i'm not looking to render the component again? Thanks
You are breaking the contract, so unfortunately you get whatever you get. And since it's not a supported use case you sadly can't expect it not to change in different React versions either.
React expects a pure functional component to be, well, a pure, functional, component (referentially transparent, no side effects). You are mutating your props, which as I said is not supported (this seems to come up a lot on github issues on the React repo).
In ye olden days, if your component was not pure you used a class. Now we have hooks, but the hook is essentially a clever workaround: because React knows about the hooks you don't violate the functional component contract. But that doesn't mean anything goes, if you have a side effect (like mutating an object defined elsewhere) then you need to put it in a hook or screwy things will happen.
N.B. even in a class, or even outside of React entirely, it's rarely (never?) a good idea to mutate the parameter to a function unless that mutation is the only thing the function does.
As i understand it, they both deal with state. Hooks seem to be more internal to a components state, while the context api seems to solve the problem of prop drilling, creating a more global state? Is this false? What am I missing?
Thanks a lot!
As I understand, they have completely different use cases. Context allows you pass a value deep into the component tree, where the value could be any kind of prop, say, a color. By using context in this way, you avoid having to do props.theme on every component that needs a theme color passed to it.
Hooks, on the other hand, replace the need for classes; instead you create a function and useState enables you to pass in variables. I.e. Hooks allow you to take a React function component and add state to it, and apply lifecycle methods like componentDidMount and componentDidUpdate. This is useful because if you find your function requires state, you don't need to refactor it into a class, you can just add Hooks. :) Of course this choice is contentious among developers though.
I'm currently implementing global state handling in React using the Context API in combination with the useReducer hook.
I have two concerns regarding mutability:
When updating state in my reducers, do I need to e.g use Lodash's cloneDeep function to sever the reference between the objects going into my reducer and the stored state?
Is it possible to ruin the global state by manually mutating it outside reducers, or will it behave like "normal React state" in the sense that manual mutations will get overwritten during the next update cycle?
For reference: docs
Both useState and useReducer give you the exact value reference that you saved (either by calling someSetter(newValue), or returning a value from the reducer function).
In either case, manually mutating the value is wrong. In particular, both of them will bail out of updates if you return the identical reference as last time, so you should always update values immutably.
I would give this a read.
https://kentcdodds.com/blog/how-to-use-react-context-effectively
This is a really good guide of how to use react context in conjunction with useReducer the right way.
Let me know if it helps.