Free ATS Friendly Resume Builder Online

Create Your Resume

Resume Builder

Resume Maker

Resume Templates

Resume PDF Download

Create Your Resume is a free online resume builder that helps job seekers create professional, ATS friendly resumes in minutes. Easily build, customize, and download modern resume templates in PDF format.

Our resume maker is designed for freshers and experienced professionals looking to create job-ready resumes. Choose from multiple resume templates, customize sections, and generate ATS optimized resumes online for free.

Create resumes for IT jobs, software developers, freshers, experienced professionals, managers, and students. This free resume builder supports CV creation, resume PDF download, and online resume editing without signup.

Create Your Resume
Back to React Js
Lesson 25 of 59

What Are React Hooks and What Are the Rules of Hooks

React Hooks are functions that allow developers to use state, lifecycle behavior, and other React features inside functional components. Hooks were introduced to simplify React code and remove the need for class components. They make logic reusable, readable, and easier to manage. The Rules of Hooks define strict guidelines that ensure Hooks work correctly and consistently across components. Understanding Hooks fundamentals and following the Rules of Hooks is essential for writing reliable, bug-free, and modern React applications.

React Hooks are a core feature that changed how developers write React applications. Before Hooks were introduced, state and lifecycle features were only available in class components. Hooks allow these features to be used inside functional components, making code simpler and more consistent.

At a fundamental level, Hooks are just JavaScript functions provided by React. They let you “hook into” React features such as state, side effects, context, and references.

Basic Hook Example

The most commonly used Hook is useState, which allows a functional component to store and update state.


import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Here, useState creates a state variable and a function to update it. When the state changes, React re-renders the component automatically.

Another fundamental Hook is useEffect, which is used to perform side effects such as API calls, subscriptions, or timers.

Example:


import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Component mounted");
  }, []);

  return <p>Hello</p>;
}

The empty dependency array ensures the effect runs only once when the component mounts.

Why Hooks Are Important

Hooks eliminate the need for complex class-based syntax, reduce boilerplate code, and make it easier to reuse logic across components. They encourage cleaner and more readable code while maintaining full control over component behavior.

Rules of Hooks

React enforces two strict rules for using Hooks. These rules ensure that Hooks behave consistently and correctly across renders.

Rule 1: Only Call Hooks at the Top Level

Hooks must be called at the top level of a React functional component or a custom Hook. They must not be called inside loops, conditions, or nested functions.

Incorrect usage:


if (isLoggedIn) {
  useState(true);
}

Correct usage:


const [isLoggedIn, setIsLoggedIn] = useState(true);

Calling Hooks at the top level ensures React calls them in the same order on every render.

Rule 2: Only Call Hooks from React Functions

Hooks can only be called from React functional components or custom Hooks. They must not be called from regular JavaScript functions.

Incorrect usage:


function helper() {
  useState(0);
}

Correct usage:


function useCustomHook() {
  const [value, setValue] = useState(0);
  return value;
}

Real-World Scenario

In real-world applications, Hooks are used to manage form state, fetch data from APIs, track user interactions, and share logic across components. For example, a custom Hook can be created to handle form validation logic and reused across multiple forms.

Important Notes and Best Practices

Always follow the Rules of Hooks to avoid unpredictable behavior. Use custom Hooks to extract reusable logic. Keep Hooks focused on a single responsibility to improve readability and maintainability.

In summary, React Hooks provide a modern, powerful way to manage state and side effects in functional components. Understanding their fundamentals and strictly following the Rules of Hooks is essential for building stable, maintainable, and professional React applications.