<Memo />

React component used to isolate children from unnecessary re-renders.

Source code is hosted on GitHub​
yarn
npm
yarn add @corets/memo
npm install --save @corets/memo
<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>
  )
}

Components - Previous

Next - Observables

Async

Last modified 1yr ago