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
React Query was created by Tanner Linsley in 2020; he is also the author of multiple react libraries with 10k+ stars on github.
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
After speaking with you & ___, I agree that the right approach would be to try out this new pattern starting with just 1 component to allow us to incrementally evaluate adoption, while still adding value to the business
Other thoughts about
I was hesitant at first to introduce
react-queryin the codebase, before converting our current business logic to custom hooks, but I realized a few things:
react-queryis only 5kb in size
001-vanilla-react-hook.jsx)because the boilerplate code is already test and abstracted away in the
react-queryconfig and options comes for free inside the