-
Notifications
You must be signed in to change notification settings - Fork 0
/
Note.txt
57 lines (44 loc) · 2.34 KB
/
Note.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
what and why React Query
1- React Query:A library for fetching data in a react application
2- React is a UI library, there is no specific pattern for data fetching.
3- useEffect hook for data fetching and useState hook to maintain component state like loading, error, or resulting data.
4- if the data is needed throughout the app, we tend to use state management libraries.
5- Most of the state management libraries are good for working with client site.
6- state management libraries are not great for working with asynchronous or server state.
/////////////////
server state is very different of client state.
1- Client state:
Persisted in your app memory and accessing or updating it is synchronous.
2- Server state
1- Persisted remotely and requires asynchronous APIs for fetching or updating
2- Has shared ownership.
3- data can be updated by someone else without your knowledge.
4- UI data may not be in sync the remote data.
challenging when you have to deal with caching, deduping multiple requests for the same data, updating stale data in background, performance optimizations etc
Course Content
1- Basic Queries
2- Poll data
3- RQ dev tools
4- create reusable Query hooks
5- Query by ID
6- Parallel Queries
7- Dynamic Queries
8- Dependent Queries
9- Infinite & paginated queries
10- update data using mutation
11- invalidate queries
12- Optimistic updates
13- Axios Interceptor
npm run serve-json/// for run API endpoints
///////////////////////////////////////////////
context provides a way to pass data through the component tree without having to pass props down manually at every level.
/////////////////////////////////////////Hooks/////////////////////
Only call Hooks in the top level;
Don't call Hooks inside loops, conditions, or nested functions.
call them for within React functional components and not just any regular javascript functions.
the useState hook lets you add state to function components
In classes, the state is always an object;
with the useState hook, the state doesn't have to be an object.
the first element is the current value of the state, and the second element is a state second function.
New state values depends on the previous state values? You can pass the function to the setter function.
when dealing with objects and arrays, always make sure to spread your state variable and then call the setter function.