Hooks are functions that let you "hook into" React features, such as state and lifecycle methods, from functional components. They offer a powerful way to manage component logic and improve code readability.

2.1. useState

The useState hook allows you to manage component state. It returns an array with two elements:

• The current state value
• A function to update the state

Here's an example:

import React, { useState } from 'react';


function Counter() {

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

return (

    


      
Count: {count}


       setCount(count + 1)}>Increment

    

  );

}

export default Counter;

In this example,

useState(0)

initializes the state with a value of 0. The

setCount

function is used to update the

count

state. When the button is clicked, the

setCount

function is called, increasing the count by 1 and re-rendering the component.

2.2. useEffect

The

useEffect

hook allows you to perform side effects, such as fetching data or setting up subscriptions, within a functional component. It takes a callback function as an argument. This callback function will run after every render, and it can also receive a dependency array as a second argument.

The dependency array tells React when to re-run the effect. If the array is empty, the effect will run only once after the initial render. If it contains a value, the effect will run whenever that value changes.

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

function ExampleComponent() {

  const [data, setData] = useState([]);

useEffect(() => {

    fetch('https://api.example.com/data')

      .then(response => response.json())

      .then(data => setData(data));

  }, []); // Empty dependency array, runs only once

return (

    


      {/* Display the fetched data */}

      {data.map(item => (

        
{item.name}


      ))}

    

  );

}

export default ExampleComponent;

In this example, the

useEffect

hook fetches data from an API and updates the

data

state. The empty dependency array ensures that the effect runs only once, after the initial render.

2.3. useContext

The

useContext

hook allows you to access the values of a React context. Contexts provide a way to share data across components without having to pass props down manually. This is particularly useful for global state or data that needs to be available to many parts of your application.

Here's how you might use useContext:

import React, { createContext, useState, useContext } from 'react';

// Create a context

const ThemeContext = createContext();

// Define a theme provider component

function ThemeProvider({ children }) {

  const [theme, setTheme] = useState('light');

return (

    

      {children}

    

  );

}

// Use the context in other components

function MyComponent() {

  const { theme, setTheme } = useContext(ThemeContext);

return (

    


       setTheme(theme === 'light' ? 'dark' : 'light')}>

        Toggle Theme

      

    

  );

}

// Wrap your app with the theme provider

function App() {

  return (

    

      

    

  );

}

export default App;

In this example,

ThemeContext

is created using

createContext

. The

ThemeProvider

component provides the current theme and a function to change the theme to its children components. The

MyComponent

uses the

useContext

hook to access the theme from the context and updates the background color based on the current theme.

1. Building a Simple To-Do App

Now let's build a simple to-do app to see how these hooks can be used in practice.

3.1. Setting Up the Components

First, we'll create the following components:

• App : The main component that holds the entire application.
• TodoList : Displays the list of to-do items.
• TodoItem : Represents a single to-do item.
• AddTodo : A form for adding new to-do items.

3.2. Implementing the TodoItem Component

Let's start with the TodoItem component, which will display a single to-do item and handle toggling its completion status:

import React from 'react';


function TodoItem({ todo, toggleComplete }) {

  return (

    


       toggleComplete(todo.id)}
      />
      

        {todo.text}

      
    


  );

}

export default TodoItem;

This component takes a



todo



object and a



toggleComplete



function as props. The



toggleComplete



function will be passed down from the parent component to handle the completion status change. The checkbox's checked status reflects the



todo.completed



property. The text of the item is styled with a line-through if it's completed.

3.3. Implementing the TodoList Component

The



TodoList



component will render the list of to-do items and pass down the



toggleComplete



function to each



TodoItem



component:

import React from 'react';


import TodoItem from './TodoItem';

function TodoList({ todos, toggleComplete }) {

  return (

    


      {todos.map(todo => (
        
      ))}
    


  );

}

export default TodoList;

It receives

todos

and

toggleComplete

props from its parent component. It maps over the

todos

array and renders a

TodoItem

component for each item, passing down the necessary props.

3.4. Implementing the AddTodo Component

The

AddTodo

component will be a form for adding new to-do items. It will handle user input and call a function to add the new item to the list:

import React, { useState } from 'react';

function AddTodo({ addTodo }) {

  const [newTodo, setNewTodo] = useState('');

const handleSubmit = (event) => {

    event.preventDefault();

    if (newTodo.trim() !== '') {

      addTodo(newTodo);

      setNewTodo('');

    }

  };

return (

    


       setNewTodo(event.target.value)}

      />

      Add

    

  );

}

export default AddTodo;

It uses

useState

to manage the input value. When the form is submitted, it prevents the default form submission behavior, checks if the input is not empty, calls the

addTodo

function passed down from the parent component, and clears the input field.

3.5. Implementing the App Component

The

App

component will hold the entire application. It will manage the state of the to-do items using

useState

, provide the necessary functions to the child components, and render the UI:

import React, { useState } from 'react';

import AddTodo from './AddTodo';

import TodoList from './TodoList';

function App() {

  const [todos, setTodos] = useState([

    { id: 1, text: 'Learn React', completed: false },

    { id: 2, text: 'Build a to-do app', completed: true },

  ]);

const addTodo = (text) => {

    const newTodo = {

      id: Date.now(), // Simple ID generation

      text: text,

      completed: false,

    };

    setTodos([...todos, newTodo]);

  };

const toggleComplete = (id) => {

    setTodos(

      todos.map((todo) =>

        todo.id === id ? { ...todo, completed: !todo.completed } : todo

      )

    );

  };

return (

    


      
To-Do List


      

      

    

  );

}

export default App;

The

App

component initializes the

todos

state with two initial items. It defines two functions:

addTodo

to add a new to-do item and

toggleComplete

to update the completion status of an item. These functions are passed down to the child components as props. The

App

component then renders the

AddTodo

and

TodoList

components.

3.6. Running the Application

Now, if you start the development server using

npm start

, you should have a basic to-do app running in your browser.

1. Conclusion

In this tutorial, we explored how to build a simple React app using hooks. We covered the essential hooks like useState , useEffect , and useContext and used them to manage state, handle side effects, and share data across components. We also built a basic to-do app, demonstrating how to apply these hooks in practice.

Here are some key takeaways:

• Hooks are powerful features that allow you to manage component logic and data within functional components.
• useState allows you to manage component state, providing a clear and concise way to handle changes in your application.
• useEffect allows you to perform side effects, such as fetching data or setting up subscriptions.
• useContext allows you to share data across components without having to pass props down manually, making it easier to manage global state or data that needs to be accessible in multiple parts of your application.

By understanding and using hooks, you can create more efficient, readable, and maintainable React applications.