DEV Community: OGOSHI VALENTINE JOHN

Demystifying Custom Hooks in React: Reusable Stateful Logic

OGOSHI VALENTINE JOHN — Mon, 22 May 2023 12:48:14 +0000

Demystifying Custom Hooks in React: Reusable Stateful Logic
React is a popular JavaScript library for building user interfaces, and it provides powerful tools like hooks to manage state and lifecycle within components. One of the most useful features in React is custom hooks, which allow developers to extract and reuse stateful logic across multiple components. In this article, we'll dive into the world of custom hooks, understand how they work, and explore their importance in modern React applications.

Understanding Custom Hooks

Custom hooks are JavaScript functions that follow a specific naming convention starting with the word "use." These functions can use built-in hooks (such as useState, useEffect, etc.) or other custom hooks to encapsulate and share stateful logic. Let's take a look at a basic example of a custom hook:

import { useState } from 'react';

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return [count, increment];
}

In the above code snippet, we define a custom hook called useCounter. This hook uses the useState hook internally to manage a count state and provides an increment function to increase the count value. By convention, custom hooks should return an array, object, or value that can be easily consumed by components.

Reusability and Separation of Concerns

The primary benefit of custom hooks is code reusability. They enable us to extract and share stateful logic across multiple components without the need for inheritance, render props, or other complex patterns. Let's see how our useCounter hook can be utilized in different components:

function CounterComponent() {
  const [count, increment] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function AnotherComponent() {
  const [count, increment] = useCounter(10);

  return (
    <div>
      <p>Another count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In the above example, both CounterComponent and AnotherComponent are utilizing the useCounter custom hook. This approach allows us to share the same stateful logic for managing count values across multiple components in a simple and consistent manner.

Custom hooks also promote separation of concerns. By encapsulating specific logic in a custom hook, we can keep our components focused on rendering UI and delegate complex functionality to the hook itself. This improves the readability and maintainability of our codebase.

Composition and Complex Logic

Another powerful aspect of custom hooks is their support for composition. We can combine multiple hooks, including other custom hooks, to create more complex behavior. This enables us to build powerful abstractions on top of existing hooks. Let's consider an example of a custom hook that manages form state:

import { useState } from 'react';

function useForm(initialState) {
  const [values, setValues] = useState(initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues((prevValues) => ({ ...prevValues, [name]: value }));
  };

  const resetForm = () => {
    setValues(initialState);
  };

  return { values, handleChange, resetForm };
}

In the above code, the useForm hook manages the form state and provides the values, handleChange, and resetForm functions. By using this hook, we can easily handle form state management in our components:

function MyForm() {
  const { values, handleChange, resetForm } = useForm({ name: '', email: '' });

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={values.name} onChange={handleChange} />
      <input type="email" name="email" value={values.email} onChange={handleChange} />
      <button type="submit">Submit</button>
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
}

By composing the useForm hook, we can easily manage form state, handle form submissions, and reset form values across different components. This composability is a key aspect of custom hooks, allowing us to create reusable and flexible logic.

Testing Custom Hooks

Testing custom hooks is relatively straightforward since they are regular JavaScript functions. We can write isolated unit tests for them without the need for rendering components. This makes it easier to test the behavior of our custom hooks in isolation, ensuring their correctness and reliability.

Testing the useCounter hook from our earlier example might involve verifying that the count state updates correctly when the increment function is called. Similarly, for the useForm hook, we could write tests to ensure that the handleChange function correctly updates the form values and that the resetForm function resets the values to the initial state.

By testing our custom hooks, we can gain confidence in their behavior and prevent potential bugs when they are used in different components.

Conclusion

Custom hooks are a powerful feature in React that enables developers to extract and reuse stateful logic across components. They promote code reusability, separation of concerns, composition, and testability. By leveraging custom hooks, we can build clean, maintainable, and reusable code that facilitates efficient development and reduces code duplication.

With a solid understanding of custom hooks, you can take advantage of this feature in your React applications and unlock the true potential of code reuse and modularity. Happy coding!

In this article, we explored the concept of custom hooks in React, learned how to create them, and understood their significance in modern application development. We discussed their reusability, separation of concerns, composition, and testing aspects. Armed with this knowledge, you can now leverage custom hooks to build robust and scalable React applications.

Building a Dynamic To-Do List App with React: A Comprehensive Guide

OGOSHI VALENTINE JOHN — Fri, 19 May 2023 16:27:53 +0000

Are you looking for an efficient way to manage your tasks and improve your productivity? In this article, we will explore how to build a dynamic to-do list app using React, a popular JavaScript library for building user interfaces. We will walk through the code step by step, explaining its functionality and demonstrating how you can customize it to suit your needs.

Prerequisites

Before we begin, make sure you have the following installed:
Node.js (version 14 or higher)
npm (Node Package Manager)

STEP 1: Setting Up the Project

To start, create a new directory for your project and navigate to it in your terminal or command prompt. Run the following command to initialize a new React project:

npx create-react-app todo-list-app
cd todo-list-app

STEP 2: Installing Dependencies

In this step, we need to install additional dependencies required for our Todo List app. Run the following command to install the required packages:

npm install react-toastify react-modal react-toastify

STEP 3: Setting up the Component

Open the src directory in your project and create a new file called TodoList.js. This file will contain our main component.

In the TodoList.js file, import the necessary dependencies and assets:

import React, { useEffect, useState } from "react";
import { ToastContainer, toast } from 'react-toastify';
import notificationSound from './assets/Best-Reminder.mp3'
import notificationSound2 from './assets/OrchestralEmergencyAlarm.wav'
import 'react-toastify/dist/ReactToastify.css';
import Modal from 'react-modal';

STEP 4: Defining the TodoList Component

Inside the TodoList.js file, define a functional component named TodoList using the arrow function syntax:

const TodoList = () => {
  // Component logic will go here
}

STEP 5: Initializing State Variables

Within the TodoList component, define state variables using the useState hook. These variables will store the tasks, input value, start times, finish times, modal state, edit index, edited value, completed tasks, and snooze times:

const [tasks, setTasks] = useState(JSON.parse(localStorage.getItem('tasks')) || []);
const [inputValue, setInputValue] = useState('');
const [startTimes, setStartTimes] = useState({});
const [finishTimes, setFinishTimes] = useState({});
const [modalIsOpen, setModalIsOpen] = useState(false);
const [showHistoryModal, setShowHistoryModal] = useState(false);
const [editIndex, setEditIndex] = useState(-1);
const [editedValue, setEditedValue] = useState('');
const [completedTasks, setCompletedTasks] = useState(JSON.parse(localStorage.getItem('completedTasks')) || []);
const [snoozeTimes, setSnoozeTimes] = useState({});
const audio = new Audio(notificationSound);
const audio2 = new Audio(notificationSound2);

In the above, we initialize the state variables with the values retrieved from localStorage or default values if no data is available.

STEP 6: Configuring the Modal

We will use the Modal component from react-modal to create a modal dialog for editing tasks. Add the following code to configure the modal:

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
    width: '50%',
  },
};

Modal.setAppElement('#root');

In the above, we define custom styles for the modal and set the app element for accessibility purposes.

STEP 7: Setting up Local Storage Effects

To persist our tasks and completed tasks in local storage, we will use the useEffect hook. Add the following code to store the tasks and completed tasks whenever they change:

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);

useEffect(() => {
  localStorage.setItem('completedTasks', JSON.stringify(completedTasks));
}, [completedTasks]);

The first useEffect will store the tasks in local storage whenever it changes, and the second useEffect will do the same for the completedTasks.

STEP 8: Handling Input Change

We need a handler function to update the input value as the user types. Add the following code to define the handleInputChange function:

const handleInputChange = e => {
  setInputValue(e.target.value);
};

STEP 9: Handling Task Addition

To add a new task, we will define the handleAddTask function. This function will validate the input, add the task to the tasks array, and display a success or error toast message. Add the following code:

const handleAddTask = () => {
  if (inputValue.trim() !== '') {
    setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
    setInputValue('');
    setStartTimes({ ...startTimes, [tasks.length]: null });
    setFinishTimes({ ...finishTimes, [tasks.length]: null });

    toast.success(`Task "${inputValue}" added successfully!`, {
      autoClose: 3000,
      position: toast.POSITION.TOP_CENTER,
    });
  } else {
    toast.error('Please enter a task', {
      autoClose: 3000,
      position: toast.POSITION.TOP_CENTER,
    });
  }
};

STEP 10: Handling Task Deletion

To delete a task, we will define the handleDeleteTask function. This function will remove the task from the tasks array and associated start and finish times. It will also display a success toast message. Add the following code:

const handleDeleteTask = (index) => {
  setTasks(tasks.filter((task, i) => i !== index));
  const newStartTimes = { ...startTimes };
  const newFinishTimes = { ...finishTimes };
  delete newStartTimes[index];
  delete newFinishTimes[index];
  setStartTimes(newStartTimes);
  setFinishTimes(newFinishTimes);

  toast.success(`Your task has been deleted!`, {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  });
};

STEP 11: Handling Task Editing

To edit a task, we will define the handleEditTask function. This function will set the edit index, pre-fill the modal with the task's current value, and open the modal. Add the following code:

const handleEditTask = (index) => {
  setEditIndex(index);
  setEditedValue(tasks[index].text);
  setModalIsOpen(true);
};

STEP 12: Handling Task Completion

When a task is marked as completed, we will define the handleCompleteTask function. This function will update the task's completion status, display a success toast message, and move the completed task to the completedTasks array. Add the following code:

const handleCompleteTask = (index) => {
  const newTasks = [...tasks];
  newTasks[index].completed = true;
  setTasks(newTasks);

  toast.success(`Your task is completed!`, {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  });

  // Move the completed tasks to the history
  const completedTask = newTasks[index];
  setCompletedTasks([...completedTasks, completedTask]);
};

STEP 13: Handling Modal Save and Close

For the modal functionality, we need to define the handleModalSave and handleModalClose functions. The handleModalSave function will update the edited task's value and close the modal, while the handleModalClose function will simply close the modal. Add the following code:

const handleModalSave = () => {
  const newTasks = [...tasks];
  newTasks[editIndex].text = editedValue;
  setTasks(newTasks);
  setModalIsOpen(false);

  toast.success(`Your task has been updated!`, {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  });
};

const handleModalClose = () => {
  setModalIsOpen(false);
};

STEP 14: Handling Start and Finish Times

To set start and finish times for tasks, we will define the handleSetStartTime and handleSetFinishTime functions. These functions will update the start and finish times respectively and display success toast messages. Add the following code:

const handleSetStartTime = (index, startTime) => {
  setStartTimes({ ...startTimes, [index]: startTime });
  setSnoozeTimes({ ...snoozeTimes, [index]: startTime });

  toast.success(`Notification successfully set!`, {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  });
};

const handleSetFinishTime = (index, finishTime) => {
  setFinishTimes({ ...finishTimes, [index]: finishTime });

  toast.success(`Notification successfully set!`, {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  });
};

STEP 15: Handling Completed Task Deletion

To delete a completed task, we will define the handleDeleteCompletedTask function. This function will remove the completed task from the completedTasks array. Add the following code:

const handleDeleteCompletedTask = (index) => {
  setCompletedTasks(completedTasks.filter((completedTask, i) => i !== index));
};

STEP 16: Handling Snooze

To snooze a task, we will define the handleSnoozeTask function. This function will set a snooze time for the task and display an info toast message. Add the following code:

const handleSnoozeTask = (index, snoozeDuration) => {
  const now = new Date();
  const snoozeTime = new Date(now.getTime() + snoozeDuration * 60000); // Convert minutes to milliseconds

  setStartTimes({ ...startTimes, [index]: snoozeTime });
  setSnoozeTimes({ ...snoozeTimes, [index]: snoozeTime });

  toast.info(`Task "${tasks[index].text}" snoozed for ${snoozeDuration} minutes!`, {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  });
};

Snooze Functionality

The handleSnoozeTask function is responsible for snoozing a task for a specified duration. When called, it receives the index of the task and the snoozeDuration in minutes. Here's how it works:

Get the current date and time using new Date().
Calculate the snooze time by adding the snooze duration (converted to milliseconds) to the current time.
Update the startTimes and snoozeTimes state by merging the existing values with the new snooze time using the spread operator (...).
Display a toast notification using a library like toast.info() to inform the user that the task has been snoozed. The notification includes the task's text and the snooze duration.

STEP 17: Handling Task Reminders and Alerts

To handle task reminders and alerts, we will use the useEffect hook. Add the following code to set up the interval:

 useEffect(() => {
        const intervalID = setInterval(() => {
            const now = new Date();
            tasks.forEach((task, index) => {
                if (startTimes[index] && now >= startTimes[index]) {
                    audio.play();

                    toast.success(`You have two minutes left to start your task: ${task.text}`, {
                        autoClose: 5000,
                        position: toast.POSITION.TOP_CENTER,
                    });

                    setStartTimes({ ...startTimes, [index]: null });
                }

                if (finishTimes[index] && now >= finishTimes[index]) {
                    audio2.play();
                    toast.warning(`You have 2 minutes left to finish your task: ${task.text}`, {
                        autoClose: 5000,
                        position: toast.POSITION.TOP_CENTER,
                    });

                    setFinishTimes({ ...finishTimes, [index]: null });
                }

                if (snoozeTimes[index] && now >= snoozeTimes[index]) {
                    audio.play();

                    toast.success(`Time to start your snoozed task: ${task.text}`, {
                        autoClose: 5000,
                        position: toast.POSITION.TOP_CENTER,
                    });

                    setStartTimes({ ...startTimes, [index]: null });
                    setSnoozeTimes({ ...snoozeTimes, [index]: null });
                }
            });
        }, 1000);

        return () => clearInterval(intervalID);
    }, [tasks, startTimes, finishTimes, snoozeTimes]);

Task Notifications

The useEffect hook is used to manage task notifications. It sets up a recurring interval (every second) to check the task statuses and display notifications when necessary. Here's how it works:

When the component mounts or any of the dependencies (tasks, startTimes, finishTimes, or snoozeTimes) change, the effect is triggered.

Within the effect, an interval is created using setInterval() to run the notification logic repeatedly.

For each task, the following checks are performed:

If the task's start time exists and the current time is greater than or equal to the start time, the notification is triggered using toast.success(). The audio is played, and the start time for that task is cleared.
If the task's finish time exists and the current time is greater than or equal to the finish time, the notification is triggered using toast.warning(). The audio2 is played, and the finish time for that task is cleared.
If the task's snooze time exists and the current time is greater than or equal to the snooze time, the notification is triggered using toast.success().
The audio is played, and both the start time and snooze time for that task are cleared.
Finally, the effect returns a cleanup function that clears the interval using clearInterval() when the component unmounts or when the dependencies change.

STEP 18: Rendering the Todo List

In the return statement, we render the JSX for our Todo List app. It consists of a title, an input field for adding tasks, a button to show the completed tasks modal, and a list of tasks. Each task is displayed as an item with buttons to delete, edit, mark as done, set start and finish times, and snooze. The modal dialog is used for editing tasks. The completed tasks are shown in a separate modal dialog.

At the end of the component, we render the ToastContainer component fromreact-toastifyto display toast notifications. Finally, we will render the todo list in theTodoList` component's JSX. Add the following code:

`
return (

My To-Do List App

Add Task
View Completed Tasks

            <ul className="action-buttons">
                {tasks.map((task, index) => (
                    <li key={index} style={{ textDecoration: task.completed ? 'Line-Through' : 'none' }}>
                        {task.text}
                        <button className="deleteTask" onClick={() => handleDeleteTask(index)} style={{ background: 'red' }}>X</button>
                        <button className="editTask" onClick={() => handleEditTask(index)} disabled={task.completed} style={{ background: 'blue' }} >Edit</button>

                        {!task.completed && (
                            <button onClick={() => handleCompleteTask(index)} style={{ background: 'green' }}>Done</button>
                        )}
                        <input type="datetime-local" className="datetime-local" onChange={(e) => handleSetStartTime(index, new Date(e.target.value))} disabled={task.completed} />
                        <input type="datetime-local" className="datetime-local" onChange={(e) => handleSetFinishTime(index, new Date(e.target.value))} disabled={task.completed} />
                        <button onClick={() => handleSnoozeTask(index, 1)} disabled={task.completed}>Snooze</button>
                    </li>
                ))}

                <Modal isOpen={showHistoryModal} onRequestClose={handleCloseHistoryModal} contentLabel="Completed Tasks" >
                    <div className="history-modal">
                        <h2 className="historyHeader">Completed Tasks</h2>

                        {completedTasks.length > 0 ? (

                        <ul>
                            {completedTasks.map((task, index) => (
                                <li key={index} className="completedTasks">
                                    <input className="checkBox" type="checkbox" checked="yes" style={{ background: 'green' }} />
                                    {task.text}
                                    <button style={{ backgroundColor: 'red'}} onClick={() => handleDeleteCompletedTask(index)}> X </button>
                                </li>
                            ))}
                        </ul>

                        ) : (
                        <p className="zeroDoneTasks" style={{color: 'black'}}>No completed tasks.</p>
                        )}

                        <div className="Close-Modal">
                            <button  onClick={handleCloseHistoryModal}>Close</button>
                        </div>

                    </div>
            </Modal>

                <Modal isOpen={modalIsOpen} onRequestClose={handleModalClose} style={customStyles}>
                    <h2 className="editTask">Edit task</h2>
                    <div className="inputHeader">
                        <input className="inputMod " type="text" value={editedValue} onChange={(e) => setEditedValue(e.target.value)} />
                    </div>
                    <div className="modalAction">
                        <button className="modBut" onClick={handleModalSave}>Save</button>
                        <button className="modBut" onClick={handleModalClose}>Cancel</button>
                    </div>
                </Modal>
            </ul>
        </div>


        <ToastContainer /> 
    </div>
);

}

`

STEP 19: Exporting the TodoList Component

At the end of the TodoList.js file, export the TodoList component:

`
export default TodoList;

Conclusion:

In this article, we have explored the code for building a to-do list app in React. We have seen how to manage tasks using state and local storage, handle user input, and implement features such as add task, view completed tasks, task deletion, editing, completion, setting time notifications and snooze feature.

We have also utilized the react-toastify library for displaying toast notifications and the react-modal library for implementing modals. By understanding and customizing this code, you can create your own task management application with added features and functionality.

By leveraging the power of React and the available libraries, you can build robust and interactive applications to enhance task management and productivity in various domains.
Please note that this code assumes you have the required CSS styles and audio files in place. Make sure to update the file paths accordingly or provide your own styles and audio files.

Good luck with your Todo List app!

react #javascript #beginners #reacthooks