The only React hooks you need 🪝
React Clean Code
Most of the businesses that we build together these days have roughly 90% percent of the same design patterns, we will have some way of authentication some list or information for the client to interact with persist that somewhere has a layer of caching and show it at different places.
With React Hooks, all this is easier and cleaner than ever…
For smaller apps, global state management will also not be required but for the sake of building something closer to the actual world, these packages and hooks should suffice. Moreover redux offers you the dev tools which is undoubtedly good for managing and debugging your application going over the state history more robust system overall.
1) UseState
Use state is a built-in react hook and the most basic and common use case one. You want the DOM to update and render based on a changed value that is when you would use the useState hook.
const [state,setState]=useState(null)the first value in the array on the left side is the state itself and the second one is a function used for updating the value of that state.
2) UseEffect
Use Effect another common use-case function you want to add in a side effect i.e. a rest call or something that is asynchronous and bring data from a server or a 3rd party API you will use this hook, this hook is a replacement for a lot of react lifecycle methods in prior versions of React. ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount, getSnapshotBeforeUpdate and more if I missed any. React team has come up with a very smart way of handling all these in one place.
const sideEffect=async()=>{await apicall //fetch //axios writing to async storage on the web etc.update the state///}
useEffect(()=>{sideEffect()return () => {
remove timers if any clear out local storage etc.
cleanup of that component..}
},[dependencies..])
3) UseHistory
Routing is essential for any UI architecture be it SPA ,SSR SSG or anything else.
The most common library used for routing in React application is react-router-DOM and in the latest version they have added some notable hooks for your application now you have the option for both having HOC’s for your Class-based components and having all the hooks providing you with the same functional components.
this.props.history.push("/admin"); /// Class componentsconst history=useHistory() // functional components
history.push("/admin")
dependency:
react-router-dom
4) UseSelector
Now we are in the zone of Real-world app’s “large-scale apps”.
Global state management is an essential lot of people will argue that it can get replaced with context provided by React for sharing the state and so onnn I will leave that debate for another session because according to me redux still has a lot of features which carry a great appeal for me and working with react on a day-to-day basis I do agree with those facts.
useSelector hook can pluck any state from your global redux state or the complete state as well if you want that.
So looking at the code.
const orderList=useSelector(state=>state.orderList);
So need not have mapstatetoprops then import it into the component by destructuring the props and a couple of unnecessary steps.
And make your code more readable and clean.
dependency:
react-redux
5) UseDispatch
Similarly on the lines of useSelector , to update the state we use a hook call as useDispatch to get the dispatch object and update redux state using that
const dispatch = useDispatch();
dispatch({type:SOME_TYPE,data:"MY_DATA"})dependency:
react-redux
Honorable Mentions:
useRef, useMemo, useCallback,useReducer,useContext
For me React hooks have reignited my interest in React and made things a lot cleaner, React has come a long way from the initial release and the team at Facebook is continuously working to roll out new and exceptional features.
For better understanding, I would recommend you to write your own hooks by using all the prior mentioned in this article and keep your JSX/TSX files neat and clean with only the render part of it.
