useSyncV

DOC : https://vikyw89.github.io/useSyncV/

NPM: https://www.npmjs.com/package/use-sync-v

GH: https://github.com/vikyw89/useSyncV

breaking change on v3

Why use sync v ?

• in front all we want is to get synced data from backend
  • recreating database in front end in a global state is tedious
  • just subscribe to the data that we need, that we can access anywhere in front end
• opinionated

To start

1npm i use-sync-v

Usage Example

To subscribe data from backend for backend without built in subscription

• You want to have a global store that fetch data from backend
• everytime you modify the backend data, useAsyncSubV will refetch the data for you
• we use stale data while refetching by default
• loading and data state can both be true at the same time
• when the component is dismounted, all fetched data will be erased

1const asyncFn = async () => {
2  const response = await fetch('https://randomuser.me/api/');
3  const data = await response.json();
4  return data;
5};
6
7export const UseAsyncSubVTest = () => {
8  // this will subscribe this component to 'randomUser', whenever we do setAsyncFn with 'randomUser' as selector, the data will refetch
9  const { data, loading, error } = useAsyncSubV('randomUser', asyncFn);
10
11  const refetchHandler = async () => {
12    // we want to modify backend data
13    asyncRefetchV('randomUser', async (p) => {
14      // we can set the data here for optimistic rendering (optional)
15      setSyncV('randomUser', someDataForOptimisticRendering);
16
17      // we can put function here to post / modify data in backend database
18      await insertDataToRandomUserTable();
19
20      // useAsyncSubV will automatically refetch data
21    });
22  };
23  return (
24    <div>
25      {loading && <div>Loading</div>}
26      {data && <div>{JSON.stringify(data)}</div>}
27      {error && <div>error</div>}
28      <button onClick={refetchHandler}>refetch</button>
29    </div>
30  );
31};
32
33// let's say we have another component that we want to use the data from 'randomUser'
34export const AnotherComponent = () => {
35  // access data from 'randomUser' earlier
36  const { data, loading, error } = useAsyncV('randomUser');
37  return (
38    <div>
39      {loading && <div>Loading</div>}
40      {data && <div>{JSON.stringify(data)}</div>}
41      {error && <div>error</div>}
42      <button onClick={refetchHandler}>refetch</button>
43    </div>
44  );
45};

To subscribe data from backend for backend with built in subscription

1export const AsyncSubTest = () => {
2  const {data, loading, error} = useAsyncV('random')
3
4  useEffect(()=>{
5    // set up subscription 
6    // then modify state data with 
7    setAsyncV('random', dataReturnedFromSubscription)
8    // this way, everytime there's a new data sent from backend, it will automatically stored to 'random' state
9  },[])
10}

To have a global state, like redux, zustand etc

1setSyncV('counter', 0);
2// create a counter state with initial value of 0
3// this is not a hook, you can call the function anywhere
4
5setSyncV('counter', (p) => p + 1);
6// this will increment counter state by 1
7
8setSyncV('data', [  {    name: 'Irene'  },  {    name: 'Irenelle'  }]);
9// this will store an Array of Object into "data" state

Updating a deeply nested object is easy

1setSyncV('data[0].phone_number', '010039945');
2// this will add phone number field to the first object in our Array under the name Irene
3
4getSyncV('data[0]');
5// => {
6//   name:'Irene',
7//   phone_number:'010039945'
8// }

To have our react component listens to state change with selector

1export const CounterDisplayComponent = () => {
2  const data = useSyncV('data[0]');
3  // sync this component to "data[0]" state, will re render component whenever the value of "data[0]" state changes
4};

To recap:

For sync global state

1setSyncV(selector:string, updates:function(previousValue) || value)
2// to update the value of the state selector using an updater function or a value
3// the updater function take a parameter (original state) and return a value (updated state)
4// if given a value, it will replace existing value with the value
5
6useSyncV(selector:string)
7// to subscribe to the state selector, and will re render the component whenever the value change
8// be specific in the selector to prevent unnecessary rerendering

For async global state

• with backend without built in subscription

1useAsyncSubV(selector:string, asyncFn:function, config?:obj)
2// to subscribe to backend
3
4useAsyncV(selector:string, config?:object)
5// will subscribe to the selector, and if there's no existing data, it will prepopulate it with {loading, data, error} initial state
6
7asyncRefetchV(selector:string, asyncFn:function, config?:object)
8// to fetch a data from api, save the results into the store
9

• with backend with built in subscription like Firestore

1useAsyncV(selector:string)
2// to listen to asyncData
3
4setAsyncV(selector:string, asyncFn:function, config?:object)
5//

for more explanation: look at the code snippet