What are Hooks in React?

What are React Hooks

Hooks are a brand-new feature introduced in React 16.8. They allow us to use state and other React features without the requirement for a Class-based component in a Functional Component. Hooks are the functions which “hook onto” React state and lifecycle features from function components.

source***

When to use Hooks?

Previously, If you create a function component and then wish to add state or other side effects to it, you must first convert it to a class.
However, you may now do so by incorporating a Hook into the outgoing function component.

Why to using Hooks?

Hooks improve React by allowing us to write simpler code that accomplishes identical functionality more quickly and effectively. Without developing classes, we can implement React state and lifecycle methods.

Advantages of Hooks

In many ways, React Hooks makes our coding easier. I’ll go over a few of them below:

• Improving Readability of Component Tree
• It’s less difficult to test and work with.
• Render props, children as functions, and classes to avoid juggling HOCs.
• Encapsulating Side Effects
• Avoid duplicating logic across components and lifecycle methods.

Rules of Using React Hooks

1. Hooks should be called at the very top of the function hierarchy, which implies that they should not be called in conditions or loops, as the reaction will not ensure the order in which hooks are executed.
2. Hooks should only be called from React functions or functional components, or from custom hooks.

There are mainly two popular hooks:

→ useState

→ useEffect

→ useContext

useState

useState returns a stateful value, and a function to update it.

During the initial render, the returned state is the same as the value passed as the first argument (0).

const [steps, setSteps] = useState(0);

The state is updated using the setState function. It receives a new state value and enqueues a component re-render.

setSteps(prevState => prevState + 1);

useEffect

useEffect takes a function for causing an effect in the function.
By default, the function supplied to useEffect is called after each finished render, but you may specify that it is only called when particular conditions have changed.

source***

useContext

useContext takes a context object (the value produced by React,createContext) and returns the context’s current context value.
When the context value changes, a component using useContext will always re-render.

const context = useContext(AppContext);

This AppContext object is what should be passed as an argument into the useContext Hook.

Additional Hooks

• useReducer : This hook is used to handle advanced states. It is a substitute for useState.
• useCallback :
• useMemo : This hook can help optimize computation cost.
• useRef : This hook aids in the creation of a mutable object that maintains the same reference across renderings.
• useImperativeHandle
• useLayoutEffect : If you wish to perform something before the DOM is visually changed, you’ll need to utilize this hook.
• useDebugValue : This hook is used to debug custom hooks using react developer tools.