Nearby lessons
42 of 44⚛️ ReactJS – Memo
📌 What is React.memo()?
What is React.memo()? Why we use it?
React.memo() is a higher-order component (HOC) that helps
in performance optimization.
It prevents unnecessary re-rendering of a component if its props have not changed.
This is useful when dealing with components that render frequently.
📌 What is React.memo()?
React.memo()is a higher-order component (HOC)- It prevents re-rendering if props are the same
- Improves performance in large applications
- Used mainly for functional components
⚙️ Without React.memo()
When state updates, all child components re-render, even if their props did not change.
This causes unnecessary re-renders and affects performance.
React Playground
import React, { useState } from 'react'; import Test from './Test.jsx'; function App() { const [counter, setCounter] = useState(0); const [data, setData] = useState(1); function addValue() { setData(2); setCounter(counter + 1); } return ( <> <Test data={data} /> <button onClick={addValue}>+ {counter} Increment</button> </> ); } export default App;
⚡ With React.memo()
By wrapping the component with React.memo(),
React will skip rendering the component if props do not change.
This improves efficiency by avoiding unnecessary re-renders.
React Playground
import React, { useState } from 'react'; import Test from './Test.jsx'; function App() { const [counter, setCounter] = useState(0); const [data, setData] = useState(1); function addValue() { setData(2); setCounter(counter + 1); } return ( <> <Test data={data} /> <button onClick={addValue}>+ {counter} Increment</button> </> ); } export default App;
🧠 Test Your Knowledge
4 QuestionsProgress: 0 / 4
Keep Going!React - Suspense & Lazy Loading