Memo Context

The memo wrapper for React Context API

Installation

$ npm install memo-context

Example

Memo context avoids unnecessary re-renders by tracking the used properties.

import React, { memo, useState } from "react";

const formCtx = createMemoContext();

function useMyForm() {
  const [name, setName] = useState("");
  const [surname, setSurname] = useState("");

  return {
    name,
    setName,
    surname,
    setSurname
  };
}

//re-rendered only when name or setName changes
const Name = memo(() => {
  const form = useMemoContext(formCtx);

  return (
    <label>
      Name:
      <input
        value={form.name}
        onChange={evt => form.setName(evt.target.value)}
      />
    </label>
  );
});

//re-rendered only when surname or setSurame changes
const Surname = memo(() => {
  const form = useMemoContext(formCtx);

  return (
    <label>
      Surname:
      <input
        value={form.surname}
        onChange={evt => form.setSurname(evt.target.value)}
      />
    </label>
  );
});

export default function MyForm({ children }) {
  const form = useMyForm();

  return (
    <formCtx.Provider value={form}>
      <Name />
      <Surname />
    </formCtx.Provider>
  );
}

Try this on CodeSandbox