Hello! Today we want to talk about one of the user-friendly features in React known as React Memo. If you are a developer working with React, you might have previously encountered the concept known as optimization or fine-tuning. So, React Memo is one of the tools we have for this purpose. I would like to describe in several paragraphs what React Memo is and why it is important.
When working with React, one of the important principles to keep in mind is the rendering of components. It is possible that when rendering different components repeatedly, the application performance might be affected, especially when the number of components is high. This is where React Memo comes into play. By utilizing this feature, we can prevent unnecessary re-renders for some components.
Interestingly, React Memo is simply a hoc (Higher Order Component) that can wrap a functional component. By doing this, React can check whether the props passed to the component have changed; if they haven't, the component won't re-render.
To better understand, let's consider an example. Let's assume we have a functional component that displays a list of data. If this data doesn't change, we can use React Memo to ensure that the component doesn't re-render unnecessarily, thus providing better performance.
Code Example for React Memo
import React from 'react';
const ListItem = React.memo(({ item }) => {
console.log('Rendering:', item);
return <li>{item}</li>;
});
const List = ({ items }) => {
return (
<ul>
{items.map(item => (
<ListItem key={item} item={item} />
))}
</ul>
);
};
export default List;
Line by Line Explanation of the Code
import React from 'react';This line imports the React library which is essential for using React Memo.
const ListItem = React.memo(({ item }) => {Here, a functional component named ListItem is defined which is protected by React.memo. This means if the prop item doesn't change, the component will not re-render.
console.log('Rendering:', item);This statement logs a message to the console to indicate the item being rendered, helping us to understand when the component re-renders.
return <li>{item}</li>;This component returns an li element for each item in the list.
const List = ({ items }) => {This is a functional component named List which utilizes the list of items passed as props.
<ul> and </ul>These elements indicate the unordered list that will display the items.
{items.map(item => (This uses the map function to convert each item in the list into a ListItem.
<ListItem key={item} item={item} />Each item in the list generates a new ListItem, passing it as a prop to the component.