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
TLDR:
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
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 🍿 React Query: It’s Time to Break up with your "Global State”! – Tanner Linsley. This is a relatively new concept which only has gained popularity in the past 2 years (mid 2020+). This video might be especially of interest to folks who are using Redux (or similar client state libraries) for storing API data. You can use client state libraries for storing your API data, but its now seen as an anti-pattern & you're likely missing out on a lot of free things when you are not using a server state library in your UI and you may be writing more complicated code than perhaps is required.
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
Hey __,
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
react-query
:I was hesitant at first to introduce
react-query
in the codebase, before converting our current business logic to custom hooks, but I realized a few things:react-query
is only 5kb in size 🎉react-query
would:001-vanilla-react-hook.jsx
001-vanilla-react-hook.jsx
)because the boilerplate code is already test and abstracted away in thereact-query
library 🎉react-query
config and options comes for free inside thereact-query
library