Comment on page
<Memo />
React component used to isolate children from unnecessary re-renders.
yarn
npm
yarn add @corets/memo
npm install --save @corets/memo
Memoizes children components to prevent unnecessary re-renders. Children get re-rendered only when one of the fields passed into the
deps
array changes, very similar to how useEffect
, useMemo
and useCallback
work. You can also display the render count for debugging purposes by setting the showRenders
property to true
.import React, { useState } from "react"
import { Memo } from "@corets/memo"
const Example = () => {
const [a, setA] = useState(0)
const [b, setB] = useState(0)
const incrementFirstValue = () => setA(a + 1)
const incrementSecondValue = () => setB(b + 1)
return (
<div>
<div>A: {a}</div>
<div>B: {b}</div>
<Memo deps={[b]} showRenders>
<div>Memo: will only re-render when <code>b</code> changes</div>
<div>A: {a}</div>
<div>B: {b}</div>
</Memo>
<button onClick={incrementFirstValue}>Increment A</button>
<button onClick={incrementSecondValue}>Increment B</button>
</div>
)
}
Last modified 2yr ago