Chapter 8: React Hooks

Introduction to React Hooks

React Hooks are a way to use state and other React features in functional components. They were introduced in React 16.8 and have become a popular way to manage state and side effects in React applications.
useState Hook in React 

The `useState` hook is used to add state to a functional component. It takes an initial value as an argument and returns an array with two elements: the current state value and a function to update the state.
 
import React, { useState } from 'react';
function Counter() {
 const [count, setCount] = useState(0);
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}
In this example, the `useState` hook is used to add a `count` state to the `Counter` component.
useEffect Hook in React

The `useEffect` hook is used to handle side effects, such as making API requests or setting timers. It takes a function as an argument and runs it after the component has rendered.

import React, { useState, useEffect } from 'react';
function Example() {
 const [data, setData] = useState(null);
 useEffect(() => {
   fetch('https://api.example.com/data')
     .then(response => response.json())
     .then(data => setData(data));
 }, []);
 return (
   <div>
     {data ? <p>Data: {data}</p> : <p>Loading...</p>}
   </div>
 );
}
In this example, the `useEffect` hook is used to fetch data from an API when the component mounts.
useContext Hook in React 

The `useContext` hook is used to access context (shared state) in a functional component.
import React, { useContext } from 'react';
import { ThemeContext } from './theme-context';
function Button() {
 const theme = useContext(ThemeContext);
 return (
   <button style={{ backgroundColor: theme.backgroundColor }}>
     Click me!
   </button>
 );
}
In this example, the `useContext` hook is used to access the `ThemeContext` in the `Button` component.
How to create Custom Hooks in React

You can create custom hooks to reuse logic in your components.
import React, { useState, useEffect } from 'react';
function useFetch(url) {
 const [data, setData] = useState(null);
 useEffect(() => {
   fetch(url)
     .then(response => response.json())
     .then(data => setData(data));
 }, [url]);
 return data;
}
function Example() {
 const data = useFetch('https://api.example.com/data');
 return (
   <div>
     {data ? <p>Data: {data}</p> : <p>Loading...</p>}
   </div>
 );
}
In this example, the `useFetch` custom hook is used to fetch data from an API.
Example Code

Here's an example of a simple React app that uses React Hooks:
import React, { useState, useEffect } from 'react';
function Counter() {
 const [count, setCount] = useState(0);
 useEffect(() => {
   document.title = `Count: ${count}`;
 }, [count]);
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}
 
Here's a practice exercise:
Create a simple React app that uses the `useState` and `useEffect` hooks to fetch data from an API and display it in a list.
Hint: Use the `useState` hook to store the data and the `useEffect` hook to fetch the data when the component mounts.