React-memoized-context NPM

react-memoized context

Avoid unnecessary re-renders when consuming partially a React Context.

< 1kb GZIP 🔬
Tree-shakable 🌴

Motivation

When a component has simple props, using PureComponent/Memo() is a possible solution to avoid extra re-renders from props coming from Context. However, components with complex props might perform worse when using PureComponent. It's in that moment that react-memoized-context rocks. It works like PureComponent/Memo() but it only performs the shallow comparison to props coming from Context.

See a Working Demo showing the benefits of react-memoized-context.

Installing

npm install react-memoized-context --save

Using

A. HOC

import { withMemoizedContext } from 'react-memoized-context';

const FootNote = ({ context, ...otherProps }) => {  
  /*... do stuff with context.name ...*/
}

// Only re-renders FootNote when UserContext.name changes.
const FootNoteContexted = withMemoizedContext(UserContext)(FootNote, ['name']);

B. Component renderProp

import { MemoizedContext } from 'react-memoized-context';

// Only re-renders FootNote when UserContext.name changes.
<MemoizedContext context={ UserContext } memoKeys={ ['name'] }>
    ({ name }) => <FootNote author={ name } />
</MemoizedContext>

C. Hook?

Well... the way React hooks work, it's impossible to directly subscribe to a part of the context value without re-rendering. See React issue #14110

function FootNote() {
  const { name } = useContext(UserContext);

  // FootNote re-renders when UserContext value changes, even if name is the same.
  <FootNote author={ name } />
}

Workaround

Use an extra hook useMemo as a wall between the Context part and the rest of the Component children. See React issue #15156.

function FootNote() {
  const { name } = useContext(UserContext);

  // Only re-renders FootNote when name is updated.
  return useMemo(() => (
    <FootNote author={ name } />
  ), [name])
}

See full Documentation with Demo.