This content originally appeared on DEV Community and was authored by Aastha Pandey
React.memo is helpful in, preventing unnecessary renders,
in the below snippet, I'm using React.memo this component will only be rendered when the component gets mounted and if the props quantity changes otherwise it'll keep displaying the previously rendered component.
But if the Cart component itself has some state or using useState, useContext, useReducer it will surely be rendered.
//Cart.js
const Cart = ({ quantity }) => {
console.log("Rendered Cart!");
return <>Number of item is {quantity}</>;
};
export default React.memo(Cart);
In the below snippet, the Cart component is being rendered and we are passing in quantity as props, so whenever one clicks on the quantity button, the Cart component will be re-rendered but won't get re-rendered when you type in something in the search text box.
//App.js
import Cart from "./Cart";
import { useState } from "react";
export default function App() {
const [quantity, setQuantity] = useState(0);
const [search, setSearch] = useState();
return (
<div className="App">
<Cart quantity={quantity} />
<hr />
<label>Quantity </label>
<button
onClick={() => {
setQuantity(quantity + 1);
}}
>
{quantity}
</button>
<hr />
<label>Search </label>
<input
onChange={(event) => {
setSearch(event.target.value);
}}
></input>
</div>
);
}
This content originally appeared on DEV Community and was authored by Aastha Pandey
Aastha Pandey | Sciencx (2021-05-27T07:44:55+00:00) Prevent unnecessary renders (React.memo). Retrieved from https://www.scien.cx/2021/05/27/prevent-unnecessary-renders-react-memo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.