React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
What happens if I update the state or set the state in the render method?
Every time the state changes, the render method will run again and display the correct state in your browser. ... One reason is, for a pure component, directly mutating state won't trigger the component re-render, which could cause some odd bugs. With setState() we can change the state without directly mutating it.
How do you render when state changes?
4 methods to force a re-render in React
- Re-render component when state changes. Any time a React component state has changed, React has to run the render() method. ...
- Re-render component when props change. ...
- Re-render with key prop. ...
- Force a re-render.
