Getting Started with React Hooks

React Hooks have revolutionized the way we write React components. In this post, we’ll explore the most commonly used hooks and how they can simplify your code.

What are Hooks?

Hooks are functions that let you use state and other React features without writing a class component. They were introduced in React 16.8 and have since become the standard way to build React applications.

The useState Hook

The most basic hook is useState, which allows you to add state to functional components:


import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The useEffect Hook

useEffect lets you perform side effects in functional components:


import { useState, useEffect } from 'react';
 
function DataFetcher() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // Empty array means this runs once on mount
 
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}