Sharable State Management For React – Nano State

Category: Featured , React
Author: kof
Views Total: 17
Official Page: Go to website
License: MIT

Fast state that can be shared across components outside of the React tree.

Fast updates are achieved by letting React reconcile only specific components where you use the value.

Import:

import * as React from "react";
import ReactDOM from "react-dom";
import { createValueContainer, useValue } from "react-nano-state";

Basic Usage:

// Value container can be exported and reused in any part of the tree.
const valueContainer = createValueContainer("Type something");
const Input = () => {
  // All we need to subscribe to those sharable value changes.
  const [value, setValue] = useValue(valueContainer);
  const onChange = (event) => {
    setValue(event.target.value);
  };
  return <input onChange={onChange} value={value} />;
};
const CurrentValue = () => {
  const [value] = useValue(valueContainer);
  return <p>Current value: {value}</p>;
};
const App = () => {
  const [inputsAmount, setInputsAmount] = React.useState(2);
  return (
    <React.Fragment>
      <p>
        Make sure you reload codesandbox after any changes, hot reload doesn't
        work in this case.
      </p>
      <p>
        {new Array(inputsAmount).fill(0).map((_, index) => (
          <Input key={index} />
        ))}
      </p>
      <CurrentValue />
      <button
        onClick={() => {
          setInputsAmount(inputsAmount + 1);
        }}
      >
        Add input
      </button>
      <button
        onClick={() => {
          setInputsAmount(inputsAmount - 1);
        }}
      >
        Remove input
      </button>
    </React.Fragment>
  );
};

Preview:

Sharable State Management For React - Nano State