Arik Jordan Graham
Arik Jordan Graham

Reputation: 341

How to re-render a component from another component in React

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

Answers (4)

Abdulhakim
Abdulhakim

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

user7810992
user7810992

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

Malakai
Malakai

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

YTG
YTG

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

Related Questions