So, I started this new project with create-react-app (it's running react v.16.13.1). I rewrote the base App component as a class, and I found that when the component is a function, like this:
function App() {
console.log('App (function)');
return 'App (function)';
}
the browser console prints out
App (function)
Great, thanks! But if the same App component is written as
class App extends React.Component {
render() {
console.log('App (class)');
return 'App (class)';
}
}
console writes
App (class)
App (class)
The reason why this happens is an intentional feature of the React. StrictMode . It only happens in development mode and should help to find accidental side effects in the render phase.
But, is there an option to prevent re-rendering with functional components? The answer is yes! Use React. memo() to prevent re-rendering on React function components.
1. Memoization using useMemo() and UseCallback() Hooks. Memoization enables your code to re-render components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
Unlike functional components, when a class component gets re-rendered it will only call the render function again instead of going through the construction of the class all over again.
React Components render twice - any way to fix this? Many developer have implemented a similar functional component and have seen this behavior. Some have even opened a bug report in the official React repository. The reason why this happens is an intentional feature of the React.StrictMode.
What does the React render function do? React render is one of the many component lifecycles that a React component goes through. The render method is required whenever you’re creating a new React component. React render requires you to return a value.
You can see in the console tab, that the render lifecycle got triggered more than once on both the app and greeting component. This is because the React app component got re-rendered after the state values were modified, and it also re-rendered its child components.
In recent versions of react, rendering uses strict mode when running in development. Strict mode intentionally double-calls the constructor and render functions to better detect unexpected side effects.
From the docs (emphasis is mine):
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
- Class component constructor, render, and shouldComponentUpdate methods
- Class component static getDerivedStateFromProps method
- Function component bodies
- State updater functions (the first argument to setState)
- Functions passed to useState, useMemo, or useReducer
Based on that I'd also expect the function component to render twice, which we don't see happening, but React might be being smart about it since there's no state.
In my testing, running in production mode did not result in the same double render of the class component.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With