Say I have a React component with state {random: 1} currently. If I call
this.setState({random: 1})
does it trigger re-rendering? If it does, is there any way I can prevent the re-rendering when calling setState but the state does not change like this?
Yes, it will re-render:
class App extends React.Component {
state = { random: 1 };
render() {
console.log('rerendering');
return (
<button onClick={() => this.setState({random: 1})}>
click
</button>
);
}
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>You can add a shouldComponentUpdate method to tell React not to re-render if the random value is the same:
class App extends React.Component {
state = { random: 1 };
render() {
console.log('rerendering');
return (
<button onClick={() => this.setState({random: 1})}>
click
</button>
);
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.random !== this.state.random;
}
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>As Artem notes, another option (which is probably better!) is to use a PureComponent instead. From the docs:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
In functional component, we can use react hooks way:
React.memo(function MyComponent (props) {
return <>{ "My Component " + props.val}</>;
})
In the code above, the component will be rerendered only when props is changed.
Let me tell you first that I am still young in react but according to my understanding it is slightly complicated to answer this question. sometimes when state does not change the component does not re render. but if you are using useEffect hook and changing the state even if the state is same, it will cause render. Here is the code example.
function App() {
const [state, setstate]=useState(1);
function myfun(){
setstate(3);
}
useEffect(()=>{
setstate(2)
console.log("i am useeffect");
})
return (
<div>
{state}
{console.log("i am app.js")}
<button onClick={myfun}>clickme</button>
</div>
);
}
export default App;
in the useEffect I am setting state. After the first render the useEffect will run it will change the state the render will again happen and useEffect will again run although this time the state is same it will render once again. You can see console but on the other side if you click on button once and change the state next time when you click the button the render will not happen.
