DEV Community

Cover image for React Hooks
Masudur Rahman
Masudur Rahman

Posted on

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-

Image description

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.

Image description

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-

Image description

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.

Image description

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. *

Top comments (1)

Collapse
 
scriptkavi profile image
ScriptKavi

Many early birds have already started using this custom hooks library
in their ReactJs/NextJs project.

Have you started using it?

scriptkavi/hooks

PS: Don't be a late bloomer :P