Handful Hooks

Hooks are backward-compatible, which are introduced in React16.8, it makes use of state and other react features without writing class components.

It does not introduce new concepts, helps in writing simplified and more understandable code implementing existing concepts.

Conventionally functional components are used for representational purposes, referred to as dumb or stateless components, but with the introduction of Hooks, we can implement all class-based components concepts with functional components.

🤔 Ever faced a situation where for earlier requirements you have implemented functional component, and now you have to implement state in component, provided you would have done it by converting it into the class component.

😇 Now simply just use Hooks to implement state in functional components.

There are Handful of Hooks which are handy and can improve the way of coding, which I will introduce in a bit.

Why Hooks?

Complex components with side effects: components are easy to understand and build at the start but growing stateful logic and side-effects including fetching data makes it harder to understand and maintain, while hooks make it easy by decoupling the logic.
Classes confuses a lot: while implementing class-based components you should have known how to use this, scope, different life-cycle methods, and their use-cases. Every time you refer to a function in class component you should have bound it with this(class context) to the function in the constructor or call it with this context.
Clean and neet code: with Hooks, all class-based life-cycle and state management can be implemented in functional components and easy to de- couple the logic with Hooks. We can implement the same logic with functional components in fewer lines.

Hooks

Basic hooks which need to have look at when getting started with are useState and useEffect

With useState we can implement state management in functional components, syntax is likely

useState returns two arguments, state variable, and state setter.
With useState, we can use any number of state variables.

Recommended way of setting state is:
setState(preState => {
   //use preState to create new state
   return newState
})

useEffect is another common Hook that can be used to implement class-based life-cycle methods like ComponentDidMount and ComponentDidUpdate. It also has a clean-up callback which is executed before every respective useEffect call.

useEffect accept args array which is trigger useEffect on change of args in array, if given empty array only triggers at mounting

useRef:

useRef can be used to refer Dom elements and can be used to create static content.

const ref = useRef(intialValue) and refered by ref.current

useMemo and useCallback:

useMemo and useCallback are memoization purpose hooks, which also accept args array, trigger upon any args in array changes. Mainly used for computing expensive calculations and avoid doing it on re-renders.

useContext and useReducer:

context Api can be implemented by using useContext, useContext will helps in consuming context value coming from the parent(context is created using React.createContext).

useReducer will help in maintaining complex state management, it works in the same fashion as Redux. We define reducers and dispatch actions to perform a required state change.

Good use-case is using useContext and useReducer together, to create gobal or localised state for component tree.

React-router-dom Hooks:

useParams: to extract params from the URL.

useHistory: to use history API in component at any level.

useLocation: provide pathname, match, and location information.

React-Redux Hooks:

react-redux provides hooks that make life easy, implementing redux logic using the hooks provided by react-redux is easy to understand and implement.

useDispatcher: return a dispatcher which dispatches actions to modify state

useSelector: to get a slice or select slice of the store from the global store.

useStore: returns the whole store which contains all store slices.

Conclusion:

These are the hooks I feel come in handy and can be used commonly, although there are few other hooks that can be used on-demand. Explanation of each hook can be huge and can’t be done in one page so do explore the above hooks individually✌️