How to re-render a component if a variable changes in React (with Hooks)

Question

(Edit: I found something else wrong with the code and fixed it. So this question becomes irrelevant.)

How to re-render the MyComponent component when const language changes? Now it works only when I switch the tabs, but I need it working when the language is changed in another component.

import React from "react";
import {useSelector} from "react-redux";

export default function MyComponent(props: any) {
    const language: string = useSelector((state: any) => state.config.language);
......
}

It should already be the case, if you are using redux properly. — moonwave99
– moonwave99, Commented Jul 15, 2021 at 12:51
Most likely you're not changing the state of language correctly through your actions or something is not quite setup on the reducer — Luis Deras
– Luis Deras, Commented Jul 15, 2021 at 13:44

simpa · Accepted Answer · 2021-09-23 16:36:12Z

2

Like said, if you are using redux properly it should alrealdy be re-rendering...

But if it dont, in a last case, you can force a re-render in the component by setting a key in parent div and changing its values whenever it config languague changes.

By request an example:

const [rerenderedComponent, setRerenderedComponent] = useState(1);

const forceUpdate = () => {
 return setRerenderedComponent(prev => prev + 1);
}

return (
<div onClick={forceUpdate} key={rerenderedComponent}>
...
</div>
)

edited Sep 23, 2021 at 16:36

answered Jul 15, 2021 at 13:18

simpa

1037 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Danielprabhakaran N Over a year ago

Can you please give some exapmle?

simpa Over a year ago

I just edited my answer with an example...

Collectives™ on Stack Overflow

How to re-render a component if a variable changes in React (with Hooks)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related