Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 44 views

    Recoil 2

    Uploaded by

    Andy Ortiz
    Atoms are units of state that can be subscribed to and updated. Components using the same atom share state. Selectors accept atoms and other selectors as input and register dependencies to update subscribers when inputs change. AtomFamilies generate unique atoms based on parameters, while SelectorFamilies allow parameters to customize get/set callbacks. Recoil provides hooks like useRecoilState, useRecoilValue, and useSetRecoilState to interact with state.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Recoil 2

    Uploaded by

    Andy Ortiz
    44 views3 pages
    Atoms are units of state that can be subscribed to and updated. Components using the same atom share state. Selectors accept atoms and other selectors as input and register dependencies to update subscribers when inputs change. AtomFamilies generate unique atoms based on parameters, while SelectorFamilies allow parameters to customize get/set callbacks. Recoil provides hooks like useRecoilState, useRecoilValue, and useSetRecoilState to interact with state.

    Original Title

    Recoil_2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Atoms are units of state that can be subscribed to and updated. Components using the same atom share state. Selectors accept atoms and other selectors as input and register dependencies to update subscribers when inputs change. AtomFamilies generate unique atoms based on parameters, while SelectorFamilies allow parameters to customize get/set callbacks. Recoil provides hooks like useRecoilState, useRecoilValue, and useSetRecoilState to interact with state.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    44 views3 pages

    Recoil 2

    Uploaded by

    Andy Ortiz
    Atoms are units of state that can be subscribed to and updated. Components using the same atom share state. Selectors accept atoms and other selectors as input and register dependencies to update subscribers when inputs change. AtomFamilies generate unique atoms based on parameters, while SelectorFamilies allow parameters to customize get/set callbacks. Recoil provides hooks like useRecoilState, useRecoilValue, and useSetRecoilState to interact with state.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 3

    Recoil: Baby Steps

    Atoms

    Atoms are units of state. They’re updatable and can be subscribed to. When an atom is
    updated, each subscribed component is re-rendered with the new value.

    If the same atom is used from multiple components, all those components share their
    state.

    Atoms basically act like storage.Components can subscribe to the state and update themselves.

    const store = atom<number>({


    key: 'store_key', // key should be unique.
    default: 0,
    });

    const Comp = () => {


    const state = useRecoilValue(store);
    return <div>state: {state}</div>;
    }

    Recoil Subscribing Hooks

    useRecoilState : like React.useState , it returns array with state and setter.

    useRecoilValue : returns state only.

    useSetRecoilState : only returns setter and it won’t subscribe update of the state change.

    useResetRecoilState : same as setRecoil but it sets back to initial state.

    Selectors
    Selectors are pure functions that accept atoms or other selectors as input.
    const priceSelector = selector({
    key: 'priceSelector',
    get: ({get}) => {
    const bread = get(purchasedBreadAtom);
    const beverage = get(purchasedBeverageAtom);
    return (bread?.price || 0) + (beverage?.price || 0)
    }
    });

    The method to register dependency and read state to use. priceSelector gets value of
    purchasedBread & purchasedBeverage and when they change, priceSelector get notified
    and updates the subscribers.

    AtomFamily
    An atomFamily represents a collection of atoms. When you call atomFamily() it will return a
    function which provides the RecoilState atom based on the parameters you pass in. The
    atomFamily() essentially provides a map from the parameter to an atom. You only need to
    provide a single key for the atom family and it will generate a unique key for each underlying
    atom.

    onst elementPositionStateFamily = atomFamily({


    key: 'ElementPosition',
    default: [0, 0],
    });

    const elementListItem = ({elementID}) => {


    const position = useRecoilValue(elementPositionStateFamily(elementID));
    return (
    <div>
    Element: {elementID}
    Position: {position}
    </div>
    );
    }

    SelectorFamily

    A selectorFamily is a powerful pattern that is similar to selector , but allows you to pass
    parameters to the get and set callbacks of a selector . The selectorFamily() utility
    returns a function which can be called with user-defined parameters and returns a selector.
    const myNumberState = atom({
    key: 'MyNumber',
    default: 2,
    });

    const myMultipliedState = selectorFamily({


    key: 'MyMultipliedNumber',
    get: (multiplier) => ({get}) => {
    return get(myNumberState) * multiplier;
    },
    });

    const myComponent = () => {


    // defaults to 2
    const number = useRecoilValue(myNumberState);

    // defaults to 200
    const multipliedNumber = useRecoilValue(myMultipliedState(100));

    return <div>...</div>;
    }

    What's Next?: https://learnrecoil.com/

    You might also like