Reputation: 341
I'm new to react and here is my question , is there's a way to re-render a component from another component?
I'm using Redux and some of the global state is effecting component B . But in my example component B is not re-rendered after some Redux state is changing from component C .
component C and B are not father/child to each other , is there a simple way to do it?
thanks
Upvotes: 4
Views: 4791
Reputation: 758
You can use useNavigate
and navigate to the same url you are on. For example, as the last line of your function, you can say navigate("/...your current url....")
window.location.reload()
is not the best option everytime. It works on localhost, but for example on when you deploy it to the internet by using services such as "Netlify", it can can cause "not found url" error
Upvotes: 1
Reputation:
A frequent problem in Redux that causes this symptom is not using the spread operator to update the state object in your reducer. Try and return something like { ...state, newValue: 'food' }
Upvotes: 2
Reputation: 3131
There is an option on how to re-render component inside component in React 16.x using Fragments
. Documentation on this can be found here.
Short explanation: Your DOM will not be polluted with extra nodes, but will allow your app to use less memory which is always great. More in-depth explanation available here.
Upvotes: 2
Reputation: 1058
Every component will re-render if any of the states connected to it change. So in order to cause a re-render, simply include that state in both components connect function.
Upvotes: 4