<Memo />

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

Source code is hosted on GitHub

yarn

yarn add @corets/memo

npm

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>
  )
}