DeepWiki

Introduction to React Hooks

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

Basic Hooks

• useState - Adds state to functional components
• useEffect - Performs side effects in functional components
• useContext - Accesses React context without nesting

Code Example

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Update document title with count
    document.title = `You clicked ${count} times`;
    
    // Cleanup function
    return () => {
      document.title = 'React App';
    };
  }, [count]); // Only re-run if count changes
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;