React Hooks

Hooks are basically functional components of React. It doesn't work inside classes. They let us use React without classes. Now we will know about some basic and additional hooks.

Basic Hooks:

1. useState():

It returns a stateful value and a function to update it. For example-

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

And the setState function is used to update the state where it belongs. It accepts a new state value and enqueues a re-render of the component.

2. useEffect():

Basically useEffect hook allows us to perform side effects in our components. Such as: fetching data, directly updating the DOM and timer. The useEffect hook accepts two arguments. Second argument is optional. For example-

3. useContext():

In React, Context is the way to manage state globally. It accepts an object which returns from React.createContext and returns the current context value for that context. Where current context value is determined by the value prop of the nearest below the calling component in the tree.

It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

Additional Hooks:

1. useReducer ()
2. useCallback()
3. useMemo()
4. useRef()
5. useImperativeHandle()
6. useLayoutEffec()
7. useDebugValue()

*In my next blog I will discuss Additional Hooks briefly. *