Grappling React Hooks and Ascend with Custom Hooks
React hooks enable us to create functional components which is way more clean in terms of syntax compared with class components. In this article I will give a crash course on common hooks that are used in projects with the main focus being custom hooks in React.
useState
useState is one the most common used react hooks. useState takes one argument which is the initial value of the state. It essentially returns two values, one being the current state of the variable (getter), and the second one is the setter to set the value of the variable.
The above example is an implementation of a useState in the context of a form. isPreorder is a variable which store a boolean, and isPreorder is going to be changed when setIsPreorder is called with the argument being the modified value
useEffect
useEffect replaces the componentDidMount, componentWillMount, etc in class components. useEffect takes two arguments. The first is the function that it will run, the second is the dependency of that function. When the mentioned dependencies change in the environment, useEffect will re-run the function again.
Be wary that there could be some cases where the function will be in an infinite loop when the dependencies are not declared correctly, resulting the page re rendering forever.
useContext
useContext in a way is like a global state that can be access by the child of the provider of the context. It is an alternative of passing down props through multiple levels of components.
One of the implementation of useContext is detecting whether the user is in mobile or not.
The World of Custom Hooks
React hooks sure are neat, but we can expand it further with custom hooks, hooks that suits specific needs. The following are examples of implementation of custom hooks that I’ve personally used.
useInput()
Since forms are very common in react, this hook is commonly used to ease development. There are various variations of this hook, this is one of them.
useInterval()
useInterval is one of the unique custom hooks. It is the implementation for setInterval in React. It can be used for countdown among other things.
useOutsideMouseClick()
When looking for interactivity we need to detect if a mouse clicked outside of an object or component. One of the implementation for this hook is when we need to close a custom modal, or a sidebar when user clicked outside its component.
useAxios()
We are bound to repeat code when we fetch data all the time, using the same variables and methods over and over again. useAxios encapsulates that into a hook and can abstract the implementation of header request and enforce DRY code.
There are a lot of available ready to use custom hooks available here https://www.npmjs.com/package/rooks. That’s it for this article, thank you for reading!
