What are Hooks & why we need them?

19 January, 2023

Contributors

ShowwcaseHQ

@showwcasehq

Kapeel Kokane

@kokaneka

What are hooks in React?

Hooks are a new feature in React 16.8 that allow developers to use state and other React features without writing a class. I know right.. it's cool!

In longer terms, Hooks allow developers to use state within a functional component, without the need to convert it to a class component. Hooks are also used to share state between components, and use effects such as data fetching, subscriptions, or manual DOM mutations. We’ll get into these other concepts at a later time, for now, lets understand the hooks!

Some examples of hooks

Here are some examples of hooks in React. We will learn about each one of these in detail throughout the Series, if you don't get it yet, don't worry! To get started, here's quick intro:

useState: This hook allows you to add state to a functional component. It returns an array with two elements: the current state and a function to update it.

const [count, setCount] = useState(0);

This hook allows you to run side-effects, such as fetching data or subscribing to a service, in a functional component. It is similar to the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class-based components.

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

useContext: This hook allows you to access context in a functional component. It takes a context object and returns the current context value for that context.

const theme = useContext(ThemeContext);

useReducer: This hook allows you to use the reducer function in functional components, similar to how you would use the setState method in class-based components.

const [state, dispatch] = useReducer(reducer, initialState);

useMemo: This hook allows you to optimize the performance of a component by only re-computing a value when one of its dependencies changes.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback: This hook allows you to optimize the performance of a component by only re-creating a callback function when one of its dependencies changes.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

These are just a few examples of the hooks that are available in React. There are many more hooks available, each with their own specific use case.

Main benefits of using hooks

One of the main benefits of using hooks is that they make it easy to reuse stateful logic between components. With hooks, you can extract stateful logic from a component and share it with other components that need it. This can make your code more reusable and easier to understand.

Hooks also make it easier to test components. Because hooks are just functions, you can test them independently of the component they are used in. This can make your tests simpler and easier to write.

Let's wrap up

Hooks are a way to add functionality to functional components and make your code more reusable, easier to understand, and easier to test. They are a powerful tool in the React developer's toolkit, and they can help you build better, more scalable applications.

Future of React

Here's something fun for you to watch

https://youtu.be/dpw9EHDh2bM

Resources

https://reactjs.org/docs/hooks-intro.html

https://reactjs.org/docs/hooks-overview.html