Custom hooks in React are a way to extract reusable logic from a component and make it reusable across multiple components. In this article, we’ll take a look at the custom hook useTodoList and how it can be used to manage a todo list in a React application.
First, let’s define what a custom hook is. In React, a custom hook is simply a function that starts with the prefix use and uses one or more of the built-in hooks provided by React (such as useState, useEffect, useContext, etc.) to encapsulate some logic that can be reused across multiple components. Custom hooks are a powerful way to abstract complex logic from components and make them more reusable and easier to test.
Now let’s take a closer look at the useTodoList custom hook in the code example above. This hook manages a todo list and provides three methods to interact with it:
list: an array that holds the current list of todos.addTodo: a function that takes a new todo as a parameter and adds it to the list.removeTodo: a function that takes an index as a parameter and removes the corresponding todo from the list.
The useTodoList hook uses the useState hook to manage the state of the todo list. It takes an initial list as a parameter and initializes the list state with it. The addTodo method creates a new array by spreading the current list and adding the new todo to the end of it. The removeTodo method creates a new array by spreading the current list, removing the todo at the specified index, and setting the new array as the new list state.
The App component uses the useTodoList hook to manage the state of the todo list. It initializes the hook with an initial list of two todos: "Buy milk" and "Do laundry". It also uses the useState hook to manage the state of the input field, which is initialized as an empty string.
The handleNewTodoChange method is called whenever the input field value changes. It updates the state of the input field with the new value.
The handleAddTodoClick method is called when the "Add Todo" button is clicked. It calls the addTodo method with the current value of the input field, and then resets the input field to an empty string.
The handleRemoveTodoClick method is called when the "Remove" button for a todo is clicked. It calls the removeTodo method with the index of the todo to remove.
Finally, the App component renders the list of todos using the list.map method to generate a li element for each todo in the list. The key attribute is set to the index of each todo, and the "Remove" button is wired up to the handleRemoveTodoClick method for each todo.
The CSS code for this example simply styles the app with a container, a header, a todo list, an input field, and a button. It also adds some basic styling to make the app look nicer
In summary, the useTodoList custom hook is a powerful way to manage a todo list in a React application. By encapsulating the logic for managing the list in a custom hook, it becomes easy to reuse the same logic across
Result the App
