I try to propagate global React context change into a sub component local state.
I need to use updated context value in the sub component for local filtering and various data transformation, but without altering the global context data.
A minimal example is available here:
https://codesandbox.io/s/contexttostate-z1svj
Context value correctly triggers component rendering on each change, but I cannot figure out how to use this change in a local effect hook.
Related
I've been working with a React context that takes in a value that is an object, and facing rerendering issues that I didn't understand fully until I saw this statement:
If you are passing down an object on your React context provider and any property on it updates, what happens? Any component which consumes that context will re-render.
My question is... Is there an alternative to using a context when it comes to holding global state stuff in an object that will be updated?
How can I update a local state and then access the updated value within the same function scope?
I am trying to update the store in redux,
I am taking values from a local state,
I'm doing this from inside the same functional scope that the state is being updated in.
when I do this, the pre-updated value of the local state is being passed to the store
I have tried adding a useEffect to the code which watches the state to try and make it update the value of the state in the function scope, but it doesn't work.
Because we are having one button do everything at once, it is all wrapped in one function.
I'm sure the solution is using async/await, but I am not so hot with that!
What I understood. State of Component then -> update Redux Store, then read the store. What you should do is: Create an action to update the store, use react-redux to dispatch the action. https://react-redux.js.org/api/connect.
Use mapStateToProps to read the store state and use it in your component.
The function of react context is to facilitate the component to pass values, but it is not responsive. It needs to cooperate with usestate to achieve responsiveness. What's the difference between using global variables and setting a layer of usestate can also achieve the effect of component transparent transmission. I can think of the difference between context and global variables is that context only transmits data to wrapped components, while global variables have no such restriction
props and context are the ways that react has for moving data between components. Built into these are the fact that if you rerender the source component and it has a new value for the prop/context, then the destination component will rerender too. The child component does not need to somehow register an event listener on the props/context, and then set state when the value changes; it's enough that the props/context changed.
If you do a global variable, then yes, it can in principle be available to all components. However, you will need to write code which listens to changes in that global variable (for example, with an event emitter or an observable), and then every component that consumes it will need to set local state when the global value changes, in order to rerender itself.
context only transmits data to wrapped components, while global variables have no such restriction
While you describe this as a restriction, it's sometimes a very useful benefit. For example, suppose you have a Theme object that sets the colors for your app. It's provided via context, and your ui components use it to style themselves.
But you also want to let the user change the theme, and see a preview of the change. Since the Theme is using context, you can create a new context provider that just wraps around the preview part of your app. Components inside the preview will use the modified theme, while the rest of the app behaves as normal.
I have global state working via Context/AppState/AppStateDispatch. I also have component state working via useState.
But there are times when it appears it might be helpful to avoid using these:
We need immediate access to the value in the current function and can't wait for the next render to get it. Storing it via useState/AppStateDispatch would prevent the value from being accessible until the next render
...and, those same values are needed globally throughout the app
...and a useRef would be destroyed on component unmount
In that case, it seems like it might be appropriate to use a globally-available, non-render-causing object to hold state for these items.
It's pretty easy to implement... but it seems non-React-y. Am I missing something?
I looked into this pretty extensively the past few days. Here are a few observations.
In my use case, I'm using an external webRTC service. Their code requires my app to install listeners for incoming calls, responses to publication of video streams, etc. The listers needs to access the component's webRTC-specific variables
At the same time, those variables can't be part of component state or app state, because when updated, their values won't be available until the next refresh, and the rest of the component needs to access them within the current render.
Using an application global var that is apart from React and doesn't trigger a refresh is, of course, kludgy.
Here's the approach I'm using at the moment. So far it appears to be helpful.
Create an application-state object to store all variables related to my component's use of webRTC.
Initialize it via a call to a function, getWebRTCDefaults().
On component mount, copy it from app state to a component-level variable. Note-- it is not in component state -- it's a component-level variable, accessible anywhere in the component.
As such it can be updated anytime within the component and its values are immediately available throughout the component.
When a call starts and ends -- and only then -- I use React context dispatch to update the app state object. I.e. I do not update that object via useEffect as that could cause unnecessary renders.
This approach seems to be helpful. I can unmount the component and when I remount it, it picks up where it left off -- the webRTC video is still running.
In my React app, I have a redux reducer which sends a List as props to my component.
I copy the prop to local state, and show as drop down. User changes the Dropdown so my local state changes.
On click of cancel , I am calling redux Toastr which triggers a method to reset my state with the original props.list. But for some reason the props.list also changed similar to my state change. With my knowledge i thought props passed to the componeent will not be changed until again i call action creator.
Anyone faced similar issue? or i am doing something wrong
Sorry for not posting the code, which I will prepare a demo if needed. Thanks!
What you are doing is an anti-pattern as you are breaking react's rule of single source of truth. You can't hold state internally in a component that is tied up with your redux state and expect it work smoothly. A similar issue of breaking the single source of truth arise when using solely React without Redux and when you try to pass props as state. In this case there is a new lifecycle hook static getDerivedStateFromProps but even this hook is advised to be used sparsely you can read about it here. So if your intent is to reset state back to it's original value, you can either:
Use static getDerivedStateFromProps (which is reserved mostly for UI)
Use a key prop which will reset you back to your initial state
Use a memoization helper such as memoize-one