restate / v1.0.0

Suscríbete solo a lo que necesitas

Elige de qué parte de un store depende cada componente, compara objetos con shallow, agrupa cambios con batch y conecta eventos externos.

En esta página

Pasa un selector Pruébalo Selecciona varios campos con shallow Escribe tu propia comparación Agrupa cambios con batch Suscríbete fuera de React Conecta eventos externos

Pasa un selector

Llama al hook con una función que elige lo que el componente necesita. Tras cada cambio, restate ejecuta el selector y compara el resultado con el anterior usando Object.is. Si son iguales, el componente no se renderiza.

La nota cambia. ¿Se renderiza ItemCount?

No. Su selector sigue devolviendo el mismo número de artículos, así que la selección es igual y no se le pide a React que lo renderice.

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function ItemCount() {
  // Re-renders only when the number of items changes.
  const count = useCart((cart) => cart.items.length);
  return <p>{count} items</p>;
}

Pruébalo

Cambia campos y mira los contadores de renders. Desactiva shallow para ver un selector que devuelve un objeto nuevo cada vez.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Comparar el resumen con shallowshallowSummary

<Example
  shallowSummary={true}
/>

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

App.jsx

import { memo, useRef } from 'react';
import { restate, shallow } from '@kkwaenggwari/restate';
import './styles.css';

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function Card({ title, value }) {
  const renders = useRef(0);
  renders.current += 1;

  return (
    <section className="card">
      <span>{title}</span>
      <output>{value}</output>
      <small>{`${renders.current} renders`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="Artículos" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Cupón" value={coupon || 'ninguno'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="Resumen" value={`${summary.count} · ${summary.coupon || '-'}`} />;
});

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Store completo" value={cart.note.length} />;
});

export default function Example({ shallowSummary = true }) {
  return (
    <main>
      <div className="grid">
        <ItemCount />
        <Coupon />
        <Summary compare={shallowSummary ? shallow : undefined} />
        <Whole />
      </div>
      <div className="actions">
        <button onClick={() => useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }))}>
          Añadir artículo
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Alternar cupón
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Editar nota
        </button>
      </div>
    </main>
  );
}

Selecciona varios campos con shallow

Un selector que construye un objeto devuelve uno nuevo cada vez, así que Object.is siempre ve un cambio. Pasa shallow como segundo argumento: compara los campos propios del objeto a un nivel de profundidad.

shallow también compara las entradas de arrays, Map y Set a un nivel de profundidad.

import { restate, shallow } from '@kkwaenggwari/restate';

function CartSummary() {
  const { count, coupon } = useCart(
    (cart) => ({ count: cart.items.length, coupon: cart.coupon }),
    shallow,
  );
  return (
    <p>
      {count} items · {coupon || 'no coupon'}
    </p>
  );
}

Escribe tu propia comparación

Cualquier función (left, right) => boolean sirve como segundo argumento. Úsala cuando shallow no sea suficiente, por ejemplo para comparar una lista por ids.

const ids = useCart(
  (cart) => cart.items.map((item) => item.id),
  (left, right) => left.length === right.length && left.every((id, index) => id === right[index]),
);

Agrupa cambios con batch

Cada set notifica a los suscriptores de inmediato. Cuando una acción cambia varios stores, envuélvela en batch: la memoria se actualiza al momento y los suscriptores se ejecutan una vez tras el callback.

import { batch } from '@kkwaenggwari/restate';

function checkout() {
  batch(() => {
    useCart.set((cart) => ({ ...cart, items: [] }));
    useOrder.set((order) => ({ ...order, status: 'paid' }));
  });
  // Subscribers run once, after both stores changed.
}

Suscríbete fuera de React

subscribeSelector te llama solo cuando cambia el valor seleccionado, con la misma función de comparación opcional.

const stop = useCart.subscribeSelector(
  (cart) => cart.items.length,
  (count, previous) => analytics.track('cart-size', { count, previous }),
);

Conecta eventos externos

El segundo argumento de restate puede ser un updater. Arranca cuando el primer componente o suscriptor empieza a escuchar y su limpieza se ejecuta cuando el último deja de hacerlo, así que los eventos del navegador, los sockets o los sensores solo están conectados mientras hacen falta.

Usa start() y stop() para controlarlo a mano.

import { restate } from '@kkwaenggwari/restate';

// Listens while at least one component or subscriber uses the store.
export const useOnline = restate(true, ({ setState }) => {
  const update = () => setState(navigator.onLine);
  window.addEventListener('online', update);
  window.addEventListener('offline', update);
  update();
  return () => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  };
});

Escrito para la API de restate 1.0