What are React Hooks? Hooks were added in React 16.8. The main purpose of React Hooks is to let you use React features without writing a class.
React Hooks let you “hook into” React features like state and lifecycle methods. For example, you can use the state hook to set state inside React function components. Hooks are fully backward-compatible, so you can adopt them gradually.
If you are just getting started, first learn how to install React JS on localhost so you can try these examples on your own machine.
Previously, function components could not hold state — you had to convert them to a class. React Hooks give you the ability to use state and side effects inside existing function components. For the complete reference, check the official React documentation.
We will discuss the two main React Hooks that are basic and used the most — you can say they are the heart of React.
React Hooks List | Hooks in React
- State Hook (useState)
- Effect Hook (useEffect)
- Custom Hooks (depends on your need)
Rules of Hooks || React Hooks Lifecycle
React Hooks are JavaScript functions, but they impose two additional rules:
- Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
- Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks.)
State Hook (useState): The state hook is used to set a state, and that state can be accessed in the child component as well as the parent component. We can set a state as Boolean, Array, or Null value types. Let’s see an example from the React official website.
[code]import React, { useState } from ‘react’;
function Example() {
// Declare a new state variable, which we’ll call “count”
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}
[/code]
In the above example we declared the count variable in a function component as
[code] const [count, setCount ] useState(0);[/code]
Right now count is set to zero. We can check it by printing the count state value in the console like this
[code] console(“current count”, count)[/code]
On the button click event we add +1 to the count state. Each time you click the button, it increases the value by 1.
Effect Hook (useEffect): The React Effect Hook gives us the ability to perform side effects in a function component. We will use the same example that we used for the State Hook. The useEffect hook tells React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
By default, the useEffect Hook runs after every render — both after the first render and after every update.
In this example, whenever we hit the button it updates the title and shows how many times we have clicked the button by using the useEffect Hook function. The same hook is commonly used to fetch data from an API — similar to making API calls in Laravel 8 on the backend.
[code]import React, { useState, useEffect } from ‘react’;
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
You clicked {count} times
);
}[/code]
7 Best Tips for Using React Hooks
- Always call Hooks at the top level of your React function — never inside loops or conditions.
- Start with useState for simple values like counters, toggles, and form inputs.
- Use useEffect for data fetching, subscriptions, and manually changing the DOM.
- Pass a dependency array to useEffect to avoid the “missing dependency” warning and infinite re-renders.
- Build custom Hooks to reuse stateful logic across components.
- Never call Hooks from regular JavaScript functions — only from React components or custom Hooks.
- Pair your components with a UI framework like Bootstrap 5 CSS framework to build responsive layouts faster.
React Hooks Interview Questions
Q1. What are React Hooks?
React Hooks are functions introduced in React 16.8 that let you use state and other React features in function components without writing a class.
Q2. What is the difference between useState and useEffect?
useState manages local state in a component, while useEffect handles side effects such as data fetching and DOM updates after render.
Q3. Can React Hooks be used inside class components?
No. React Hooks only work inside function components and custom Hooks. If you are handling forms in class-free components, see our guide on form validation in jQuery.
React Hooks Lifecycle
Function components don’t have lifecycle methods like classes, but React Hooks cover the same phases. useEffect with an empty dependency array runs on mount (like componentDidMount), with dependencies it runs on updates, and its cleanup function runs on unmount — just like componentWillUnmount.
If you run into the objects are not valid as a React child error, check that your state holds valid renderable elements before passing them to JSX.