Getting Started with React Hooks

React Hooks have revolutionized the way we write functional components, allowing us to use state and other React features without writing a class. If you're new to Hooks, this tutorial will get you up to speed on the fundamentals.

What are Hooks?

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. The two most common Hooks are useState and useEffect.

The useState Hook

The useState Hook allows you to add state to functional components. In the past, you could only use state in class components. Now, you can manage state in functional components with a simple function call.

import React, { useState } from 'react';

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

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}
                

The useEffect Hook

The useEffect Hook lets you perform side effects in functional components. Data fetching, subscriptions, or manually changing the DOM in React components are all examples of side effects. useEffect runs after every render, including the first one.

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
       setCount(count + 1)}>
        Click me
      
    
  );
}
                

Rules of Hooks

There are two important rules you must follow when using Hooks:

• 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.

Hooks are a powerful addition to React that make it easier to build complex components with less code. By understanding and using them correctly, you can write cleaner, more maintainable React applications.