Mongez React Atom Part-5

Mohamed Eltahawy
Nov 25, 2023
2 min read
post_comment0 Comments
post_like2 Likes

#Listen to atom value changes


This is what happens withuseAtomhook, it listens to the atom's value change usingonChangemethod.

// anywhere in your app import { currencyAtom } from "~/src/atoms"; currencyAtom.onChange((newValue, oldValue, atom) => { // });

Please note theonChangeis returning anEventSubscriptionwe can remove the listener anytime, for example when unmounting the component. >

// anywhere in your app import { currencyAtom } from "~/src/atoms"; // in your component... const [currency, setCurrency] = useState(currencyAtom.value); useEffect(() => { const onCurrencyChange = currencyAtom.onChange(setCurrency); return () => onCurrencyChange.unsubscribe(); }, []);

#Watch For Partial Change

Sometimes you may need to watch for only a key in the atom's value object, theatom.watchfunction is the perfect way to achieve this.

Please note this only works if the atom's default is an object or an array. >

// anywhere in your app import { atom } from "@mongez/react-atom"; const userAtom = atom({ key: "user", default: { key: "Hasan", address: { city: "New York", }, }, }); userAtom.watch("key", (newName, oldName) => { console.log(newName, oldName); // 'Hasan', 'Ali' }); // later in the app userAtom.update({ ...userAtom.value, key: "Ali", });

Dot notation is allowed too.

// anywhere in your app import { atom } from "@mongez/react-atom"; const userAtom = atom({ key: "user", default: { key: "Hasan", address: { city: "New York", }, }, }); userAtom.watch("address.cty", (newCity, oldCity) => { console.log(newName, oldName); // 'New York', 'Cairo' }); // later in the app userAtom.update({ ...userAtom.value, address: { ...userAtom.value.address, city: "Cairo", }, });

#Atom Watch Hook

In some scenarios, we may need to watch for a key in the atom's value object for change and perform an action inside a component, theatom.useWatchhook is the perfect way to achieve this.

export function SomeComponent() { const [city, setCity] = useState(userAtom.get("address.city")); userAtom.useWatch("address.city", setCity); // first time will render New York then it will render Cairo return <>Current City: {city}; }

#Value Mutation Before Update

Sometimes it's useful to mutate the value before updating it in the atom, this can be achieved via definingbeforeUpdatemethod in the atom declaration.

This is very useful especially when dealing with objects/arrays and you want to make some operations before using the final value.

beforeUpdate(newValue: any, oldValue: any, atom: Atom)

import { atom, Atom } from "@mongez/react-atom"; export const multipleAtom: Atom = atom({ key: "multiple", default: 0, beforeUpdate(newNumber: number): number { return newNumber * 2; }, }); multipleAtom.update(4); console.log(multipleAtom.value); // 8

#Listen to atom destruction

To detect atom destruction whendestroy()method, useonDestroy.

// anywhere in your app import { currencyAtom } from "~/src/atoms"; const subscription = currencyAtom.onDestroy((atom) => { // });

#Atom Type

We can get the type of the atom's value usingatom.typeproperty.

const currencyAtom = atom({ key: "currency", default: "USD", }); console.log(currencyAtom.type); // string

If the default value is an array it will be returned as array not object.

const todoListAtom = atom({ key: "todo", default: [], }); console.log(todoListAtom.type); // array

Wait for more, to be continued !