react-hawk

Example App

About

This library is for educational purposes and is not intended for production use.

Concepts were originally introduced by recoiljs

This is an attempt to break down the library and reconstruct it.

In the process coming away with a better understanding of the state lifecycle of react.

Design Goals

• Lightweight global state management
• Recompute state only when the state dependency changes
• Re-render components only when the state dependency changes
• A hawk or atom is a single piece of global state
• A hawkeye or selector computes a value based on one or more hawks
• useHawkState to access current value and subscribes / unsubscribes to the hawk state
• useHawkSetState dispatches changes to hawks and hawkeyes throughout the application

Install

yarn add react-hawk

Usage

You can import the generated bundle to use the whole library generated by this starter:

import React from 'react';
import { hawk, hawkeye, useHawkState, useHawkSetState } from 'react-hawk';

const counterState = hawk({
  key: 'counter',
  default: 0
});

const isEvenState = hawkeye({
  key: 'isEven',
  get: ({ get }) => {
    const count = get(counterState)
    return Boolean(count % 2) ? 'odd' : 'even'
  }
})

const useIncrease = () => {
  const setCounter = useHawkSetState(counterState)
  const increase = (n = 1) => {
    setCounter(count => count + n)
  }
  return increase
}

const useDecrease = () => {
  const setCounter = useHawkSetState(counterState)
  const decrease = (n = 1) => {
    setCounter(count => count - n)
  }
  return decrease
}

export const Counter = () => {
  const count = useHawkState(counterState)
  const even = useHawkState(isEvenState)
  const decrease = useDecrease()
  const increase = useIncrease()
  return (
    <>
      <button onClick={() => decrease()}>-</button>
      {count} is {even}
      <button onClick={() => increase()}>+</button>
    </>
  )
}

Credits

Made with :heart: by @rphansen91 and all these wonderful contributors (emoji key):

Recoil facebookexperimental/Recoil

This project follows the all-contributors specification. Contributions of any kind are welcome!