React Hooks

 Introduction

Before React Hooks were introduced, managing state and lifecycle methods was only possible using class components.
This often resulted in long, complex code that was read and maintain.

React Hooks, introduced in React 16.8, completely changed how developers write React components. Hooks allow you to use powerful React features like state, side effects, and easier to understand.

Most commonly used hooks
  • useState
  • useEffect

What Are React Hooks?

Hooks are special functions provided by React that let you "hook into" 
React features.
With Hooks, you can
  • Store and update state
  • Run code when a component loads or updates
  • Fetch data from APIs
  • Interact with the browser (like updating the document title)
Hooks only work in functional components and must follow 2 simple rules

1. Call Hooks at the top level of your component
2. Only call Hooks from React functions

Understanding useState

The useState hook allows you to add state to a functional component

Basic Syntax



stateValue - current state
setStateValue - function to update the state
initialValue - starting value of the state


Example: Counter App



How it works

  • The component starts with count = 0
  • Clicking the button updates the state
  • React automatically re-renders the UI
This makes UI updates simple and predictable

Why useState is important

  • Eliminates the need for class components
  • Makes code shorter and more readable
  • Encourages better component design
  • Ideal for forms, counters, toggles, and UI interactions


Understanding useEffect

The useEffect hook is used to handle side effects in React components.

What is a Side Effect?

A side effect is any operation that affects something outside the component, such as 

  • Fetching data from an API
  • Updating the document title
  • Setting timers
  • Subscribing to events
Basic Syntax



  • The function runs after rendering
  • The dependency array controls when it runs

Example 1: Run Once on Component Load


Explanation
  •  Empty dependency array []
  •  Effect runs only once, similar to componentDidMount

Example: Run When State Changes



Explanation
  • Effect runs every time count changes
  • Useful for syncing UI with external systems
Common useEffect Use Cases

  • Fetching API data 
  • Updating browser title
  • Listening to window resize
  • Handling timers and intervals
  • Cleaning up subscriptions
Why Hooks Make React Better
Hooks provide several advatages
  • Cleaner and shorter code
  • No need for complex lifecycle metods
  • Better seperation of logic
  • Easier reuse of functionality
  • Improved readability and maintainabilty
Modern React development heavily relies on Hooks, and most new projects avoid class components entirely.








Comments

Post a Comment

Popular posts from this blog

Styling React Applications in 2026

Image
 Styling is a very important part of building React applications. In 2026, React developers focus on  Speed Maintainability Scalability when choosing a styling method. The most commonly used styling options in 2026 are,  CSS Modules Tailwind CSS Styled Components 1. CSS Modules  CSS Modules allow you to write normal CSS files, but the styles are scoped to a single component. This prevents class name conflicts. Why developers use CSS Modules No global CSS conflicts  Easy to learn if you know CSS Works well with large projects Supported by most React setups (Vite, Next.js, CRA) Example 2. Tailwind CSS (Most Popular in 2026) Tailwind CSS is a utility first CSS framework. Instead of writing CSS files, you apply styles directly using class names. Why Tailwind CSS is very popular? Very fast development No need to write custom CSS Consistent design system Small final CSS bundle  Perfect for modern UI and responsive design Tailwind CSS is the top choice in 2026 era...
Read more

React Best Practices in 2026

React continues to be one of the most popular frontend libraries in 2026. As applications grow larger and more complex, following best practices is very important. These practices help you write clean, maintainable, and scalable React code. 1. Use Functional Components In 2026, functional components are the standard way to build React applications. They are: Easier to read and write Supported by React Hooks Better for performance and future updates Class components are rarely used now. Hooks like useState , useEffect , and useContext make functional components powerful and flexible. 2. Keep Components Small and Focused Each component should do one main job. Good practice: One component = one responsibility Break large components into smaller reusable ones Easier testing and debugging Small components are easier to understand and reuse across the application. 3. Avoid Unnecessary State Do not store everything in state. Before using state, ask: Can this be calculated from existing data?...
Read more

Fetching Data in React Using APIs

Image
  Introduction Most real world React applications need data from a backend server or API. For example: User Details Product Lists Blog Posts Weather Data React provides the useEffect hook to handle these side effects like fetching data. What is useEffect ? useEffect is a React Hook used to run code after a component renders. Common uses of  useEffect Fetch data from APIs Update the document title Add event listeners Run code when a component loads Why Use useEffect for API Calls? When a component loads, React first renders the UI Then useEffect runs API data is fetched UI updates with new data Basic Syntax of useEffect The empty array [] means run the code only once when the component loads Example : Fetching Data from an API Let's fetch users from a free API Step by Step Example Explanation of the Code 1. useState Store API data Initial empty 2. useEffect Runs once when the component loads Calls the API 3. fetch() Sends request to API  Converts responses to JSON Saves ...
Read more