REACT-WITH-MEMO

What

Prevent unnecessary renders with ease!

Why

Managing your app state using context can cause a lot of unnecessary renders.
Using react-with-memo can help prevents most of them!

How

import * as React from 'react';
import { memoSetup } from 'react-with-memo';
 
const Context = React.createContext({});
 
const Provider = ({ children }) => {
  const [name, setName] = React.useState("test-name");
  const [id, setId] = React.useState("test-id");
 
  return (
    <Context.Provider value={{ name, setName, setId, id }}>
      {children}
    </Context.Provider>
  );
};
 
const withMemo = memoSetup(Context);
 
function Id({ id, setId }) {
  return <p data-hook="id" onClick={() => setId(Math.random())}>{id}</p>;
};
 
const MemoId = withMemo(Id, ({ id, setId }) => ({ id, setId }));
 
function Name({ name, setName }) {
  return <p data-hook={'name'} onClick={() => setName("sd")}>{name}</p>;
};
 
 
const MemoName = withMemo(Name, ({ name, setName }) => ({ name, setName }));
 
 
 
function App() {
  return (
    <Provider>
        // will only render when prop, id, or setId change
        <MemoId prop={0} />
        // will only render when name, or setName change
        <MemoName />
    </Provider>
  );
}