Kiebot Learning Solutions

Introduction to React Hooks


By Rafi CH

Introduction to React Hooks

Hooks are a new addition in React 16.8. With Hooks, you can utilize state and other React features without writing a class. React Hooks were introduced at React Conf in October 2018 as a means to use state and side-effects (see lifecycle methods in class components) in React function components. Earlier, function components have been called functional stateless components (FSC), but now it’s possible to use state with React Hooks and hence many people mention them as function components today.


React Hooks allow us to compose React applications with only function components. If you write a function component, and later you want to add some state to it, the only way you can handle this was by converting it to a class. But, the same is feasible now by using a Hook inside the existing function component.


Hooks are comparable to JavaScript functions. Hooks rule assures that all the stateful logic in a component is visible in its source code. These rules are:

Only call Hooks at the top level

Hooks must be used at the top level of the React functions. Avoid the practice of calling Hooks inside loops, conditions, or nested functions. This rule guarantees that Hooks are called in the same order each time a component renders.

Only call Hooks from React functions

It’s not possible to call Hooks from regular JavaScript functions. Rather, you can call Hooks from React function components. Also, Hooks can be called from custom Hooks.


Hook state is the new method of declaring a state in React app. Hook utilizes useState() functional component for setting and retrieving state.
//Declare a new state variable, which we’ll call”count”
const [count, setCount] = useState(0);
The useState is the Hook that needs to call inside a function component to add some local state to it. The useState returns a pair where the first element is the current state value/initial value, and the second one is a function that enables us to update it. After that, we will call this function from an event handler or someplace else. The useState is similar to this.setState in class.


The Effect Hook useEffect() allows you to perform side effects in function components. It does not use components lifecycle methods that are present in class components. In other words, Effects Hooks are similar to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.
Side effects have common features in which most web applications need to operate, such as:
The above code is an illustration in which we set the document title to a custom message, including the number of clicks.


Only call Hooks at the top level

Additional Hooks


Hooks improve the design pattern of our code and the performance of our app, and it is recommendable to use the same in your web app development projects. It simplifies the code by forcing us to avoid the usage of some of the ceremonies while defining components. And thereby making the code cleaner and readable. Class Components will not go outdated and hence one doesn’t need to edit Class Based Components using Hooks.


Recent Post

Laravel Unit Testing

Laravel is the most popular PHP framework for application development. From the testing perspective, it is also known to be highly [..]

Introduction to React Hooks

Hooks are a new addition in React 16.8. With Hooks, you can utilize state and other React features without writing a class. React   [..]

Reactive Programming: Why should you care?

Reactive Programming is a way to build a scalable architecture that is resilient and [..]



Scroll to Top