Brief Why React Hooks?
React hooks provide an excellent way to abstract away business logic out of your component;
- ideally if your using hooks well, your React components should be very lighweight and mostly you will only see hooks being used at the top of your React function component and your markup returned at the end.
hooks can only be used with React function components, not class components.
- Prior to react hooks, there was not an easy way to create reusable abstractions as easily since React class components forced you to split your logic into different methods
hooks make testing and managing abstractions easier (IMO) Consider watching these videos:
- Custom Hooks in React: The Ultimate UI Abstraction Layer
- How React Hooks has Transformed Everything I Write
They abstract away business logic out of components & put them in hooks, its easier to debug, test & helps keeps component very clean with mostly just markup
Concerning React Query
If you're using React and you don't know the difference between "client vs server state" in modern web application, consider watching
Nowdays the majority of modern react apps could get by without using any client state libraries. Personal Example
- I used React on the web and React Native for over 1 year outside of LinkedIn and we did not have any client state library in our app. We used React context using the "Context hooks pattern" (very common in good codebases, not enough folks talk about it). At LinkedIn I work on 2 multiproducts that don't use any client state libraries. Infradev team is moving away from Redux too.
- I know friends at many company's Uber, Netflix etc that allow maintain many apps without any external 3rd party library for client state.
A recommendation I give to folks is use React's builtin context to begin with, try to stretch its usage until you need something a lot more advanced (recoil, zustand, etc). You will get far with React's context, and when you hit challenges read into React.useMemo, React.useCallback, useRef APIs and other APIs to help you.
Some strong use cases for client state librarie's are web apps with VERY complex UI interaction's and tens of thousands of elements potentially. Recoil: State Management for Today's React by Dave McCabe from React core team highlights such uses cases.
Custom Hooks in React: The Ultimate UI Abstraction Layer - Tanner Linsley
- react-query Examples
- GET: https://www.youtube.com/watch?v=OorL3E7oCjA&t=813s
- POST/PUT/DELETE query example: https://www.youtube.com/watch?v=vzLmQn19kS4
- React Query Endorsements & Overall Community Sentiment