React Hooks are functions that enable functional components to use state and other React features that were traditionally only available in class components. They were introduced in React 16.8 to provide a more concise and readable way to manage component state and side effects in functional components. There are several built-in hooks provided by React, such as useState, useEffect, useContext, and more. These hooks allow you to perform various tasks, such as managing component state, handling side effects, accessing context, and working with the component lifecycle.

Types of React Hooks :

React hook types
  • useState
  • useEffect
  • useContext
  • useMemo
  • useCallback
  • useReducer
  • useRef
  • useId

Instead of this react hooks there are some more hooks that is used but above are the important hooks that is used most of the times when you are developing a react application.

Stateful vs Stateless Components

React Components can be stateful or stateless.

  • A stateful component declares and manages local state in it.
  • A stateless component is a pure function that doesn’t have a local state and side-effects to manage.

pure function is a function without any side-effects. This means that a function always returns the same output for the same input. If we take out the stateful and side-effects logic from a functional component, we have a stateless component. Also, the stateful and side-effects logic can be reusable elsewhere in the app. So it makes sense to isolate them from a component as much as possible.

In the next articles am going to explain about each and every type of react hook in detail like where we can use the hook, when we can use hook and on which case which hook is suitable to solve the particular problem. Basically, if i say then hooks are JavaScript functions that manage the state’s behaviour and side effects by isolating them from a component. In the next article am going to explain the useState Hook in react.

useState hook in react