Options
All
  • Public
  • Public/Protected
  • All
Menu

@dbeining/react-atom

Index

Interfaces

Functions

Functions

initialize

  • NOTE: This is a back door for users of react prior to hooks

    Initializes react-atom with the provided HookDependencies and returns the full public API of react-atom.

    By default, react-atom imports the HookDependencies from the version of react you've installed, but initialize provides you the option to use a different implementation of hooks. For example, if you're using a version of react prior to the release of hooks, you might like to use a poly/ponyfill like react-with-hooks.

    If you use initialize, you need to be careful to avoid importing useAtom and co. from react-atom and make sure to only use the instances returned by initialize throughout your application.

    example
    
import {useLayoutEffect, useMemo, useState} from 'alt-hooks'
import { initialize } from '@dbeining/react-atom';

export const {Atom, deref, set, swap, useAtom} = initialize({
 useLayoutEffect,
 useMemo,
 useState,
});

    Parameters

    Returns PublicExports

useAtom

  • useAtom<S>(atom: Atom<S>): DeepImmutable<S>
  • useAtom<S, R>(atom: Atom<S>, options: UseAtomOptions<S, R>): DeepImmutable<R>

  • Important: useAtom is a React Hook and must follow the Rules of Hooks

    Reads the current state of an Atom and subscribes the currently rendering function component to the Atom's state such that, when the Atom's state changes, the component will automatically re-render to read the new state. The subscription is removed when the component unmounts.

    example
    
import {Atom, useAtom} from '@dbeining/react-atom'

const stateAtom = Atom.of({ count: 0 })

function MyComponent() {
 const {count} = useAtom(stateAtom)
 return <p>The count is {count}</p>
}

    Type parameters

    • S

      the type of the internal state of the Atom

    Parameters

    • atom: Atom<S>

    Returns DeepImmutable<S>

    the internal state of the Atom

  • Important: useAtom is a React Hook and must follow the Rules of Hooks

    useAtom enhanced with options.

    Reads the current state of an Atom and subscribes the currently rendering function component to the Atom's state such that, when the Atom's state changes, the component will automatically re-render to read the new state. The subscription is removed when the component unmounts.

    tip

    if options.select is an expensive computation, it should be memoized

    example
    
import { Atom, useAtom } from '@dbeining/react-atom'
import { Orders } from 'elsewhere'

const stateAtom = Atom.of({ orders: [...Orders] })

function MyComponent() {
 const orderCount = useAtom(stateAtom, {
   select: (s) => s.orders.length
 })

 return <p>There are {orderCount} orders</p>
}

    Type parameters

    • S

      the type of the internal state of the Atom

    • R

      the type of the return value of useAtom computed via options.select

    Parameters

    Returns DeepImmutable<R>

    the value returned from applying options.select to S