At this moment, web development community seems to agree that React is the best library for building user interfaces. At the very least, it is the most popular. Web developers love it because it’s easy to adopt, maintain and test.

One thing that really catapulted React to its current leading position is the introduction of hooks. Many developers, especially beginners, did not like to use class components. Syntax is too complicated and they take too long to set up.

Previously, functional components were ‘dumb’, because they couldn’t have state, lifecycle methods and other essential features for building interactive applications. Well, introduction of hooks has changed that. Functional components are no longer for visuals only. They can have all of these ‘smart’ functionalities we mentioned before.

In this article, we will explain specific hooks, and how to use them for best results.

Let’s start with the most common and most useful hook – useState(). As the name might suggest, it allows functional components to maintain a state.

This hook is pretty simple to use – simple create two variables and set them equal to useState(). Of course, you can customize variable name. useState() will create a state variable – a stand-alone value, similar to properties in the state object. The second value it returns will be the function to update the state value. This way, you don’t have to use the long setState() method to update the state.

The argument to the useState() hook will be the initial value of corresponding state variable.

You can use the useState() hook multiple times to create various state variables necessary for dynamic functionalities of your app.

useEffect() hook is essentially a replacement for lifecycle methods. In class components, lifecycle methods were used to perform side effects. useEffect() takes a callback function, which is executed when the component mounts. It also takes an array to specify the state variables to ‘look out for’. For example, previously you could define componentDidUpdate() lifecycle method to run a certain function if state variables changed. Well, the second argument to the useEffect() hooks allows you to specify state variables, whose changes can trigger the component to update. If the array is empty, the side effect will run only once. This is essentially the same outcome as componentDidMount().

React has other useful hooks as well. Specifically: useRef() to create refs, which are essential for directly working with DOM elements. useContext() for creating a Context API to allow child components easy access to data in parent components. useMemo() facilitates memorization.

Often times you can combine two hooks to implement a certain feature. For example, useEffect() and useRef() allow you to implement scroll to bottom on click feature in React. This is a very useful feature for improving UX of the company.

Or you can create custom hooks with custom functionality. Since most web development projects have specific needs, the ability to create custom hooks allows you to simplify the process of developing your app.

Custom hooks can reduce repetitiveness of code. Previously, you might’ve had to copy and paste the same code in lifecycle methods of different components. Now you can write a custom hook with specific functionality, and simply reuse that hook throughout your components.