DEV Community

Jahangir-Alam-Noman
Jahangir-Alam-Noman

Posted on

React Hooks

Hooks: Hooks are essentially React's functional components. It isn't possible to use it in a classroom setting. They allow us to use React without having to use classes. Now we'll look at some basic and advanced hooks.
Basic Hooks:

useState(): It returns a stateful value as well as an update function.
For example-

The initial rendering of the returned state (state) returned as the same value passed as the first argument in the above code (initialState).

The setState function is used to update the state to its proper location. It accepts a new state value and re-renders the component in the background.

Image description

useEffect(): In a nutshell, the useEffect hook allows us to add side effects to our components. Fetching data, directly updating the DOM, and setting a timer are just a few examples. There are two arguments to the useEffect hook. The second argument is not required. Consider the following scenario:

Image description

useContext(): Context is the way to manage state globally in React. It accepts an object that React returns. create Context and return the context's current context value. The value prop of the nearest context determines the current context value.
below the calling component in the tree.

Image description

It can be used in conjunction with the useState Hook to more easily share state between deeply nested components than useState alone.
*Additional Hooks: *

useReducer ()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffec()
useDebugValue()

In my next blog I will discuss Additional Hooks briefly.

Top comments (0)