DEV Community: Luke

Easy Todo List App with React and Tailwind CSS

Luke — Fri, 04 Oct 2024 01:35:37 +0000

In this blog post, I'll walk you through the process of building a simple Todo List application using React and TailwindCSS. This project is perfect for beginners who want to dive deeper into React for managing state and learn how to style components using the utility-first CSS framework, TailwindCSS.

Project Overview

The goal of this project is to create a basic Todo List where users can:

Add new tasks.
Toggle tasks between completed and uncompleted.
Delete tasks they no longer need.

We’ll leverage React’s state management capabilities and style everything using TailwindCSS.

Step1: Setting up the project

To begin, we’ll set up a React project using create-react-app and install TailwindCSS.

Create React App:

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

Install TailwindCSS: TailwindCSS needs to be installed along with PostCSS and autoprefixer for automatic browser compatibility.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure Tailwind: In tailwind.config.js, update the content section to point to your React app’s files:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Include Tailwind in your CSS: In src/index.css, import the TailwindCSS directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, TailwindCSS is fully integrated into our React app!

Step 2: Creating the Todo List Component

Next, let's create a Todo List component where users can add, delete, and toggle tasks.

Here’s the core structure of the TodoList.js component:

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const toggleTaskCompletion = (index) => {
    const updatedTasks = tasks.map((task, i) =>
      i === index ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-4 bg-white rounded-lg shadow-lg">
      <h1 className="text-2xl font-bold mb-4">Todo List</h1>
      <div className="flex mb-4">
        <input
          type="text"
          className="flex-1 p-2 border rounded"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task..."
        />
        <button
          onClick={addTask}
          className="ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Add
        </button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index} className="flex justify-between items-center mb-2">
            <span
              className={`flex-1 ${task.completed ? 'line-through text-gray-500' : ''}`}
              onClick={() => toggleTaskCompletion(index)}
            >
              {task.text}
            </span>
            <button
              onClick={() => deleteTask(index)}
              className="ml-4 p-1 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Step 3: Integrating the Component into the App

Once the TodoList component is ready, integrate it into the main App.js file. Here’s how:

import './App.css';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

Step 4: Testing your work!

By running:

npm start

We can see the basic layout of our Todo List Page like this:

Typing your todos:

Clicking the Add button to add the todos:

Toggle the tasks that have been completed:

Delete the task that you don't want anymore by clicking the Delete button:

Conclusion

Building this Todo List with React and TailwindCSS helped demonstrate the power of combining a component-based library like React with a utility-first CSS framework. React's state management, combined with Tailwind's simple, intuitive styling, allowed us to quickly create a responsive, interactive application.

You can continue enhancing this app by:

Persisting the tasks in localStorage so they’re saved between page refreshes.
Adding due dates or priority levels to tasks.
Expanding the design with more complex styles and animations.

Thanks for reading! I hope this project inspired you to explore more with React and TailwindCSS.

React: Introduction to Hooks for Beginners

Luke — Thu, 29 Aug 2024 07:09:05 +0000

What are React Hooks?

React Hooks are special functions that let you use state and other React features in functional components. Introduced in React 16.8, Hooks have fundamentally changed the way developers build components.

Hooks allow you to "hook into" React’s state and lifecycle features directly from functional components, which were previously only possible in class components.

Historical Background

Class Components Before Hooks: Before Hooks, React developers had to rely on class components to manage state and lifecycle methods. This often led to complex, unmanageable code, especially as components grew larger.
Why Hooks Were Introduced: Hooks were introduced to solve the common problems associated with class components, such as the difficulties in reusing logic, managing side effects, and dealing with complex lifecycle methods.

Why use hooks?

The Problems Hooks Solve

State Management in Functional Components: Previously, functional components were stateless. Hooks enabled them to manage state, making it easier to write simpler, more reusable code.
Reusing Logic: Class components made it difficult to reuse stateful logic across multiple components. With Hooks, you can easily extract and share logic through custom hooks.
Simplifying Complex Components: Hooks help reduce the complexity of components by eliminating the need for lifecycle methods that are spread out across different phases of a component’s life.
Cleaner and More Readable Code: With Hooks, there’s no need to deal with this keyword, binding issues, or long class hierarchies, making the code more readable and easier to maintain.

Commonly Used Hooks Brief Intro

useState

Concept: useState is the most basic Hook, allowing you to add state to functional components. It returns an array with the current state and a function to update it.
How It Works: When you call useState, React initializes state for the component and preserves it between re-renders.

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Use Cases: useState is used whenever you need to keep track of a value that can change over time, like form inputs, counters, toggles, etc.

useEffect

Concept: useEffect allows you to perform side effects in function components. It combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount.
How It Works: useEffect runs after every render by default but can be controlled with a dependency array to run only when certain values change.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Use Cases: useEffect is perfect for fetching data, manually updating the DOM, setting up subscriptions, or cleaning up resources when a component unmounts.

useContext

Concept: useContext allows you to access context values directly in your functional components without needing to use the Consumer component.
How It Works: When you call useContext with a context object, React returns the current value of that context.

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext);

  return <button className={theme}>I am styled by theme context!</button>;
}

Use Cases: useContext is used when you need to pass data deeply through the component tree without having to prop-drill, such as theme settings, authenticated user information, etc.

useReducer

Concept: useReducer is similar to useState, but more powerful in managing complex state logic. It is often used as an alternative to useState when dealing with complex state transitions.
How It Works: useReducer takes a reducer function and an initial state, returning the current state and a dispatch function.

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

Use Cases: useReducer is ideal for managing complex state logic, such as when the state object has multiple sub-values or when the next state depends on the previous one.

useRef

Concept: useRef returns a mutable ref object whose .current property is initialized to the passed argument. It’s primarily used to access DOM elements directly.
How It Works: useRef doesn’t cause a re-render when the .current property changes, unlike useState.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

Use Cases: useRef is useful for accessing and interacting with DOM elements directly, as well as holding mutable values that don’t cause re-renders, like timers or IDs.

Limitations and Notice Points of Hooks Usage

Hooks Can Only Be Called in Function Components or Custom Hooks

Limitation: Hooks cannot be used in regular JavaScript functions. They can only be called within React's function components or custom Hook functions.
Reason: React relies on the order of Hook calls to correctly manage component state and side effects. If Hooks are used in regular functions, React won't be able to track these calls properly, leading to errors or unstable behavior.

// Correct
function MyComponent() {
  const [count, setCount] = useState(0);
  // Using useState is allowed
  return <div>{count}</div>;
}

// Incorrect
function myFunction() {
  const [count, setCount] = useState(0); // Error: Hooks cannot be used in regular functions
}

Hooks Can Only Be Called at the Top Level

Limitation: Do not call Hooks inside loops, conditionals, or nested functions. Hooks must be called at the top level of a component or custom Hook.
Reason: React relies on the order of Hook calls to manage state correctly. If Hooks are called inside conditionals or loops, the order of calls might change between renders, leading to incorrect state updates.

// Correct
function MyComponent() {
  const [count, setCount] = useState(0);

  if (count > 0) {
    // You can use state or call other functions inside conditionals
  }

  return <div>{count}</div>;
}

// Incorrect
function MyComponent() {
  if (someCondition) {
    const [count, setCount] = useState(0); // Error: Hooks cannot be called inside conditionals
  }

  return <div>{count}</div>;
}

Naming Convention for Custom Hooks

Limitation: The name of a custom Hook must start with "use," such as useMyCustomHook.
Reason: The "use" prefix lets React know that the function is a custom Hook, allowing it to handle the Hook calls properly. Violating this naming convention might cause the custom Hook not to be recognized correctly.

Be Aware of the Asynchronous Nature of State Updates

Limitation: State updates are asynchronous, so do not rely on the immediately updated value after a state change.
Reason: React batches state updates to improve performance, which may cause delays in state updates. Depending on the immediately updated value may result in outdated data.

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // May log the old value because setCount is asynchronous
  }

  return <button onClick={handleClick}>Click me</button>;
}

When using React Hooks, it's essential to adhere to these usage limitations and best practices to ensure your components behave consistently, predictably, and are easy to maintain. Hooks are designed to simplify the development of function components, but improper usage can introduce unexpected issues. Understanding these limitations and avoiding common mistakes will help you use Hooks more effectively and write robust React applications.

Javascript: Deep & Shallow Clone Complete Guide

Luke — Wed, 28 Aug 2024 07:10:25 +0000

Shallow Clone

Shallow clone refers to creating a new object that exactly copies the original object's properties. If the copied value is a primitive data type, the value itself is copied. If it's a reference data type, the memory address is copied. If the memory address of one object changes, the other object will also reflect that change.

(1) Object.assign()

Object.assign() is a method introduced in ES6 for copying objects. The first parameter is the target object, and the remaining parameters are source objects. The syntax is Object.assign(target, source_1, ...). This method can perform shallow copying and can also perform deep copying of one-dimensional objects.

Notes:

If the target object and source objects have properties with the same name, or if multiple source objects have properties with the same name, the properties of the latter objects will overwrite those of the former.
If the function has only one parameter, and that parameter is an object, it returns the object directly. If the parameter is not an object, it converts the parameter to an object and then returns it.
Since null and undefined cannot be converted to objects, the first parameter cannot be null or undefined, or it will throw an error.

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
console.log(target);  // {a: 1, b: 2, c: 3}

(2) Spread Operator

The spread operator can be used to copy properties when constructing literal objects. The syntax is: let cloneObj = { ...obj };.

let obj1 = {a: 1, b: {c: 1}};
let obj2 = {...obj1};
obj1.a = 2;
console.log(obj1); // {a: 2, b: {c: 1}}
console.log(obj2); // {a: 1, b: {c: 1}}
obj1.b.c = 2;
console.log(obj1); // {a: 2, b: {c: 2}}
console.log(obj2); // {a: 1, b: {c: 2}}

(3) Array Methods for Shallow Copying Arrays

Array.prototype.slice

The slice() method is a JavaScript array method that returns selected elements from an existing array. The syntax is array.slice(start, end), and the method does not modify the original array.
The method takes two optional parameters. If neither is provided, the method creates a shallow copy of the array.

let arr = [1, 2, 3, 4];
console.log(arr.slice()); // [1, 2, 3, 4]
console.log(arr.slice() === arr); // false

Array.prototype.concat

The concat() method is used to merge two or more arrays. This method does not modify the existing arrays but returns a new array.
The method takes two optional parameters. If neither is provided, the method creates a shallow copy of the array.

let arr = [1, 2, 3, 4];
console.log(arr.concat()); // [1, 2, 3, 4]
console.log(arr.concat() === arr); // false

(4) Implementing Shallow Clone

Here is a JavaScript code example to manually implement a shallow copy:

// Implementation of shallow copy
function shallowClone(object) {
  // Only copy objects
  if (object === null || typeof object !== "object") return object;

  // Determine whether to create a new array or object based on the type of the original object
  let newObject = Array.isArray(object) ? [] : {};

  // Iterate over the original object, and only copy its own properties
  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] = object[key];
    }
  }

  return newObject;
}

Explanation:

Type Checking: The function first checks if the input is an object (not null or a primitive type). If not, it returns itself.
Type Determination: Based on whether the original object is an array or a plain object, the function creates a new array or a new object to hold the copied properties.
Property Copying: The function then iterates over the original object using a for...in loop. It checks if the property is directly on the object (i.e., not inherited) using hasOwnProperty(). If so, it copies the property to the new object.
Return: Finally, the new object (or array) with the copied properties is returned.

Test Case:

const original = {
  name: 'Alice',
  age: 25,
  details: {
    city: 'New York'
  },
  hobbies: ['reading', 'swimming']
};

const copy = shallowClone(original);

console.log(copy);
// Output: { name: 'Alice', age: 25, details: { city: 'New York' }, hobbies: ['reading', 'swimming'] }

copy.name = 'Bob';
copy.details.city = 'Los Angeles';
copy.hobbies[0] = 'running';

console.log(original.name); // 'Alice', the basic property of the original object is not modified

console.log(original.details.city); // 'Los Angeles', the reference of the nested object is shared

console.log(original.hobbies[0]); // 'running', the reference of the array elements is shared

Deep Clone

Deep clone, in contrast to shallow clone, creates a new reference type and copies the corresponding values when encountering properties that are reference types. This means the object obtains a new reference type rather than a reference to the original type. Deep clone can be achieved for some objects using JSON's two functions, but since the JSON format is stricter than the JavaScript object format, it may fail when the property values include functions or Symbol types.

(1) JSON.stringify()

JSON.parse(JSON.stringify(obj)) is one of the more commonly used methods for deep copying. Its principle is to use JSON.stringify to serialize the JavaScript object into a JSON string, and then use JSON.parse to deserialize (restore) the JavaScript object.

This method can achieve deep copying in a simple and straightforward manner, but it has some limitations. If the object being copied contains functions, undefined, Date, RegExp, Map, Set, or Symbol values, these will be lost after processing with JSON.stringify().

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

const original = {
  name: 'Alice',
  age: 25,
  details: {
    city: 'New York',
    hobbies: ['reading', 'swimming']
  }
};

const copy = deepClone(original);

copy.name = 'Bob';
copy.details.city = 'Los Angeles';
copy.details.hobbies[0] = 'running';

console.log(original.name); // 'Alice'
console.log(original.details.city); // 'New York'
console.log(original.details.hobbies[0]); // 'reading'

（2）_.cloneDeep provided by Lodash

The lodash library provides the _.cloneDeep method for performing deep copies.

const _ = require('lodash');

const original = {
  name: 'Alice',
  age: 25,
  details: {
    city: 'New York',
    hobbies: ['reading', 'swimming'],
    birthDate: new Date('1995-01-01')
  }
};

const copy = _.cloneDeep(original);

copy.name = 'Bob';
copy.details.city = 'Los Angeles';
copy.details.hobbies[0] = 'running';
copy.details.birthDate.setFullYear(2000);

console.log(original.name); // 'Alice'
console.log(original.details.city); // 'New York'
console.log(original.details.hobbies[0]); // 'reading'
console.log(original.details.birthDate.getFullYear()); // 1995

(3) structuredClone() global function

structuredClone() is a native JavaScript API used for deep copying. It can clone a JavaScript object and recursively copy all of its nested child objects, rather than just copying references. Compared to traditional deep copy methods, structuredClone() is more powerful and flexible.

Features of structuredClone()

Deep Copy: structuredClone() recursively copies an object and all of its nested child objects and arrays, creating a completely new object copy. Modifying the copy does not affect the original object, and vice versa.

Support for Multiple Data Types: structuredClone() can correctly handle most JavaScript data types, including:
Primitive data types (e.g., strings, numbers, booleans)
Objects and arrays
Date objects
RegExp objects
Map and Set
ArrayBuffer, TypedArray, Blob, File, FileList, and other types

Unsupported Types: structuredClone() cannot clone the following types:
Functions (Function)
Symbol
Objects with circular references (this will throw an error)
Performance Optimization: Since structuredClone() is natively implemented by the browser, it generally offers better performance and stability compared to manually implemented deep copy methods.

const original = {
  name: 'Alice',
  age: 25,
  details: {
    city: 'New York',
    birthDate: new Date('1995-01-01'),
    pattern: /abc/g,
  },
  hobbies: ['reading', 'swimming'],
  nestedArray: [1, [2, 3]],
};

// Perform deep copy using structuredClone
const copy = structuredClone(original);

// Modify the copy
copy.name = 'Bob';
copy.details.city = 'Los Angeles';
copy.hobbies[0] = 'running';
copy.nestedArray[1][0] = 99;

console.log(original.name); // 'Alice'
console.log(original.details.city); // 'New York'
console.log(original.hobbies[0]); // 'reading'
console.log(original.nestedArray[1][0]); // 2

console.log(copy.name); // 'Bob'
console.log(copy.details.city); // 'Los Angeles'
console.log(copy.hobbies[0]); // 'running'
console.log(copy.nestedArray[1][0]); // 99

structuredClone() is particularly well-suited for the following scenarios:

Deep Copying Complex Data Structures: When you need to copy an object that contains nested objects, arrays, or other complex structures, structuredClone() ensures complete independence between the copy and the original object.
Avoiding the Complexity of Manual Deep Copying: Manually implementing deep copying requires handling various edge cases and data types. structuredClone() provides a native solution that handles these situations more simply and reliably.

(4) Implementing Deep Clone

function deepClone(object, hash = new WeakMap()) {
  // Non-object types or null, return directly
  if (object === null || typeof object !== "object") return object;

  // Check for circular references
  if (hash.has(object)) return hash.get(object);

  // Handle special object types
  let newObject;
  if (Array.isArray(object)) {
    newObject = [];
  } else if (object instanceof Date) {
    newObject = new Date(object);
  } else if (object instanceof RegExp) {
    newObject = new RegExp(object);
  } else {
    newObject = {};
  }

  // Record the current object to avoid circular references
  hash.set(object, newObject);

  // Recursively copy all properties
  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] = deepClone(object[key], hash);
    }
  }

  return newObject;
}

// Test example
const original = {
  name: "Alice",
  age: 25,
  details: {
    city: "New York",
    hobbies: ["reading", "swimming"],
    birthDate: new Date("1995-01-01"),
    pattern: /abc/g,
  },
};

// Introduce a circular reference
original.self = original;

const copy = deepCopy(original);

console.log(copy);

Notice:

Return value for non-object types: If object is null or a non-object type (such as string, number, boolean), the function directly returns object. This ensures that the deep copy function returns the original value instead of undefined when encountering non-object types.
Handling circular references: A WeakMap is used to track objects that have already been copied. If the same object is encountered again, the function returns the previously created copy to prevent infinite recursion.
Handling special object types: The function includes special handling for Date and RegExp objects to correctly copy instances of these types. If additional types (e.g., Map, Set) need to be supported, the code can be further extended based on specific requirements.

React: Understanding React's Event System

Luke — Tue, 27 Aug 2024 11:08:54 +0000

Overview of React's Event System

What is a Synthetic Event?

Synthetic events are an event-handling mechanism designed by React to achieve cross-browser compatibility, optimize performance, and simplify event handling. It encapsulates native browser events, providing a unified API and event handling approach, ensuring consistent event behavior across different browsers.

Working Principle of Synthetic Events

Event Delegation

React handles events through an event delegation mechanism. Event delegation means that React doesn't directly bind event listeners to each DOM element. Instead, it binds all event listeners to a single root node (usually the document or the root container of the application). When a user interacts with the page and triggers an event, the event bubbles up the DOM tree to the root node, where React captures the event and wraps it as a synthetic event.

Advantages of Event Delegation:

Performance Optimization: It reduces the number of event handlers that need to be bound, thereby lowering memory usage.
Simplified Event Management: By managing all events at the root node, React can more efficiently handle event propagation, prevent default behaviors, and perform other event-related operations.

Event Pooling

A key mechanism behind synthetic events is event pooling. Event pooling means that React reuses event objects instead of creating a new event object each time an event is triggered. When an event occurs, React takes an event object from the event pool, initializes it, and passes it to the event handler. After the event handling is complete, the event object is cleaned up and returned to the event pool for reuse in the next event.

Advantages of Event Pooling:

Reduced Memory Allocation: By reusing event objects, React avoids frequent memory allocation and garbage collection operations, which can significantly improve performance, especially for high-frequency events like mouse movements or scrolling.

Lifecycle of Synthetic Events

Due to event pooling, the lifecycle of synthetic events differs from that of native events. Typically, after the event handler function has finished executing, the properties of the synthetic event object are reset to null so that it can be returned to the pool for reuse.

Points to Note:

Asynchronous Operations: If you need to access the event object within an asynchronous operation, you must call the event.persist() method. This will prevent the event object from being returned to the pool, ensuring that it doesn't get reset during the asynchronous operation.

API and Usage of Synthetic Events

The React Synthetic Event API provides a set of interfaces similar to native browser events, which are commonly used in React. Below is a detailed introduction to some frequently used methods and properties, along with examples illustrating their usage scenarios.

a. preventDefault()

The preventDefault() method is used to prevent the default behavior of an event. Default behavior refers to the actions that the browser usually performs when an event occurs, such as refreshing the page when a form is submitted or navigating to a new page when a link is clicked.

Example: Preventing the default form submission behavior

function MyForm() {
  const handleSubmit = e => {
    e.preventDefault(); // Prevent the default form submission behavior
    console.log('Form submission prevented');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, if preventDefault() is not called, clicking the submit button will trigger the form submission, causing the page to refresh. By calling preventDefault(), the default behavior is prevented, allowing you to customize the form handling logic instead.

b. stopPropagation()
The stopPropagation() method is used to stop the further propagation of an event. Events typically propagate from the target element where the event was triggered up to its parent elements (event bubbling). By calling stopPropagation(), you can prevent this propagation.

Example: Stopping the propagation of a click event

function Parent() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };

  return (
    <div onClick={handleParentClick}>
      Parent Div
      <Child />
    </div>
  );
}

function Child() {
  const handleChildClick = e => {
    e.stopPropagation(); // Stop the event from bubbling up to the parent element
    console.log('Child clicked');
  };

  return <button onClick={handleChildClick}>Click Me</button>;
}

In this example, clicking the button triggers the click event handler in the Child component. By default, the event would bubble up to the Parent component and trigger its click handler as well. However, by calling stopPropagation() in the Child component, the event bubbling to the Parent is prevented.

c. target
The target property refers to the actual DOM element that triggered the event. It is commonly used to access the element that initiated the event and to handle logic related to that element.

*Example: Accessing the element that triggered the event *

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
  };

  return (
    <div onClick={handleClick}>
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  );
}

In this example, when either button is clicked, the e.target in the handleClick function will point to the button element that was clicked. The target property is used to identify which specific element was clicked.

d. currentTarget
The currentTarget property refers to the DOM element to which the event handler is bound. During event handling, regardless of which child element the event bubbles to, currentTarget always points to the element that the event handler is attached to.

Example: Distinguishing between target and currentTarget

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
    console.log('Event handler bound to:', e.currentTarget);
  };

  return (
    <div onClick={handleClick}>
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  );
}

In this example, when any button is clicked, event.target will point to the button that was clicked, while event.currentTarget will always point to the parent div element where the event handler is bound.

e. persist()
The persist() method is used to retain the event object, preventing React from reusing it. This method is typically needed in asynchronous operations.

Example: Using the event object in an asynchronous operation

function MyComponent() {
  const handleClick = e => {
    e.persist(); // Retain the event object

    setTimeout(() => {
      console.log('Button clicked:', event.target);
    }, 1000);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

In this example, because the event object might be reused in asynchronous operations, persist() is called to retain the event object, ensuring that the event properties can be safely accessed in the setTimeout callback.

React Synthetic Event Types

React provides various types of synthetic events that cover common user interaction scenarios. Below are some commonly used synthetic event types along with examples:

a. Mouse Events

onClick: Triggered when an element is clicked.
onDoubleClick: Triggered when an element is double-clicked.
onMouseDown: Triggered when a mouse button is pressed down on an element.
onMouseUp: Triggered when a mouse button is released on an element.
onMouseMove: Triggered when the mouse is moved over an element.
onMouseEnter: Triggered when the mouse pointer enters the element's area; does not bubble.
onMouseLeave: Triggered when the mouse pointer leaves the element's area; does not bubble.

Example: Using onClick and onMouseMove

function MouseTracker() {
  const handleMouseMove = e => {
    console.log(`Mouse position: (${e.clientX}, ${e.clientY})`);
  };

  return (
    <div onMouseMove={handleMouseMove} style={{ height: '200px', border: '1px solid black' }}>
      Move your mouse here
    </div>
  );
}

function MyApp() {
  return (
    <div>
      <button onClick={() => console.log('Button clicked!')}>Click Me</button>
      <MouseTracker />
    </div>
  );
}

In this example, the MouseTracker component logs the mouse position whenever it moves within the div area, while the button in the MyApp component logs a message when clicked.

b. Keyboard Events

onKeyDown: Triggered when a key is pressed down on the keyboard.
onKeyUp: Triggered when a key is released on the keyboard.
onKeyPress: Triggered when a key is pressed and held down (deprecated; it is recommended to use onKeyDown instead).

Example: Handling the onKeyDown Event

function KeyHandler() {
  const handleKeyDown = e => {
    console.log('Key pressed:', e.key);
  };

  return <input type="text" onKeyDown={handleKeyDown} placeholder="Press any key" />;
}

In this example, when the user presses any key while focused on the input field, the handleKeyDown function logs the name of the pressed key.

c. Focus Events

onFocus: Triggered when an element gains focus.
onBlur: Triggered when an element loses focus.

Example: Handling onFocus and onBlur Events

function FocusExample() {
  return (
    <input
      onFocus={() => console.log('Input focused')}
      onBlur={() => console.log('Input blurred')}
      placeholder="Focus and blur me"
    />
  );
}

In this example, when the input field gains or loses focus, a corresponding message is logged to the console.

d. Form Events

onChange: Triggered when the value of a form control changes.
onSubmit: Triggered when a form is submitted.
onInput: Triggered when the user inputs data (including actions like deleting or pasting).

Example: Handling onChange and onSubmit Events

function MyForm() {
  const [value, setValue] = React.useState('');

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log('Form submitted with value:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, as the user types into the input field, the handleChange function updates the component's state. When the form is submitted, the handleSubmit function logs the current value of the input field.

Differences Between React Events and Regular HTML Events

a. Event Naming

Native: All lowercase (e.g., onclick).
React: CamelCase (e.g., onClick).

b. Event Handler Syntax

Native events use strings to specify event handlers.
React events use functions as event handlers.

c. Preventing Default Browser Behavior

Native: can use 'return false' to prevent the browser's default behavior.
React: Instead, you must explicitly call preventDefault() to achieve this.

d. Order of Event Execution
Native events execute first, followed by synthetic events. Synthetic events bubble up and are bound to the document. Therefore, it's advisable to avoid mixing native and synthetic events. If a native event stops propagation, it may prevent the synthetic event from executing because synthetic events rely on bubbling up to the document to execute.

Why does React Choose Synthetic Events

The reasons React chooses synthetic events include:

Cross-Browser Consistency: Synthetic events abstract away the differences in event handling across various browsers, ensuring consistent behavior across all browsers.
Performance Optimization: Event delegation and event pooling significantly reduce the overhead of event handling, improving the application's performance.
Better Event Management: With synthetic events, React can more effectively control event propagation, prevent default behaviors, and closely integrate with React's batch update mechanism for more efficient event handling.

Javascript: Promise Complete Guide

Luke — Sun, 25 Aug 2024 07:50:24 +0000

What is Promise?

Promise is a new solution for asynchronous programming. ES6 has incorporated it into the language standard, unifying its usage and natively providing the Promise object.

Its introduction greatly improved the predicament of asynchronous programming, avoiding callback hell. It is more reasonable and powerful than traditional solutions like callback functions and events.

A Promise, simply put, is a constructor that holds the result of an event that will complete in the future (usually an asynchronous operation). Syntactically, a Promise is an object from which asynchronous operation messages can be retrieved. Promise provides a unified API, allowing various asynchronous operations to be handled in the same way.

Why should we use Promise?

It can effectively solve the callback hell problem in ES5 (avoiding deeply nested callback functions).
It follows a unified standard, with concise syntax, strong readability, and maintainability.
The Promise object provides a simple API, making it more convenient and flexible to manage asynchronous tasks.

Promise's States

When using a Promise, we can classify it into three states:

pending: Pending. This is the initial state, where the Promise is neither fulfilled nor rejected.
fulfilled: Fulfilled/Resolved/Successful. When resolve() is executed, the Promise immediately enters this state, indicating that it has been resolved and the task was successfully completed.
rejected: Rejected/Failed. When reject() is executed, the Promise immediately enters this state, indicating that it has been rejected and the task has failed.

When new Promise() is executed, the state of the promise object is initialized to pending, which is its initial state. The content inside the parentheses of the new Promise() line is executed synchronously. Within the parentheses, you can define a function for an asynchronous task, which has two parameters: resolve and reject. For example:

// Create a new promise
const promise = new Promise((resolve, reject) => {
  //promise's state is pending as soon as entering the function
  console.log('Synchronous Operations');
  //Begin to execute asynchronous operations
  if (Success) {
    console.log('success');
    // If successful, execute resolve() to switch the promise's state to Fulfilled
    resolve(Success);
  } else {
    // If failed, excecute reject() to pass the error and switch the state to Rejected
    reject(Failure);
  }
});
console.log('LukeW');

//Execute promise's then()：to manage success and failure situations
promise.then(
  successValue => {
    // Process promise's fulfilled state
    console.log(successValue, 'successfully callback'); // The successMsg here is the Success in resolve(Success)
  },
  errorMsg => {
    //Process promise's rejected state
    console.log(errorMsg, 'rejected'); // The errorMsg here is the Failure in reject(Failure)
  }
);

Basic Usage of Promise

Create a new Promise Object

The Promise constructor takes a function as its parameter, which has two arguments: resolve and reject.

const promise = new Promise((resolve, reject) => {
  // ... some code
  if (/* Success */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise.resolve

The return value of Promise.resolve(value) is also a promise object, which can be chained with a .then call. The code is as follows:

Promise.resolve(11).then(function(value){
  console.log(value); // print 11
});

In the resolve(11) code, it will cause the promise object to transition to the resolved state, passing the argument 11 to the onFulfilled function specified in the subsequent .then. A promise object can be created using the new Promise syntax, or by using Promise.resolve(value).

Promise.reject

function testPromise(ready) {
  return new Promise(function(resolve,reject){
    if(ready) {
      resolve("hello world");
    }else {
      reject("No thanks");
    }
  });
};

testPromise(true).then(function(msg){
  console.log(msg);
},function(error){
  console.log(error);
});

The meaning of the above code is to pass an argument to the testPromise method, which returns a promise object. If the argument is true, the resolve() method of the promise object is called, and the parameter passed to it is then passed to the first function in the subsequent .then, resulting in the output "hello world." If the argument is false, the reject() method of the promise object is called, which triggers the second function in the .then, leading to the output "No thanks."

Methods in Promise

then()

The then method can accept two callback functions as parameters. The first callback function is called when the Promise object's state changes to resolved, and the second callback function is called when the Promise object's state changes to rejected. The second parameter is optional and can be omitted.

The then method returns a new Promise instance (not the original Promise instance). Therefore, a chained syntax can be used, where another then method is called after the first one.

When you need to write asynchronous events in sequence, requiring them to be executed serially, you can write them like this:

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{

})

catch()

In addition to the then method, a Promise object also has a catch method. This method is equivalent to the second parameter of the then method, pointing to the callback function for reject. However, the catch method has an additional function: if an error occurs or an exception is thrown while executing the resolve callback function, it will not stop the execution. Instead, it will enter the catch method.

p.then((data) => {
     console.log('resolved',data);
},(err) => {
     console.log('rejected',err);
     }
); 
p.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});

all()

The all method can be used to complete parallel tasks. It takes an array as an argument, where each item in the array is a Promise object. When all the Promises in the array have reached the resolved state, the state of the all method will also become resolved. However, if even one of the Promises changes to rejected, the state of the all method will become rejected.

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(1);
    },2000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },1000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //result：[1,2,3] 
})

When the all method is called and successfully resolves, the result passed to the callback function is also an array. This array stores the values from each Promise object when their respective resolve functions were executed, in the order they were passed to the all method.

race()

The race method, like all, accepts an array where each item is a Promise. However, unlike all, when the first Promise in the array completes, race immediately returns the value of that Promise. If the first Promise's state becomes resolved, the race method's state will also become resolved; conversely, if the first Promise becomes rejected, the race method's state will become rejected.

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       reject(1);
    },2000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },1000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },3000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //result：2
},rej=>{
    console.log(rej)};
)

So, what is the practical use of the race method? When you want to do something, but if it takes too long, you want to stop it; this method can be used to solve that problem:

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})

finally()

The finally method is used to specify an operation that will be executed regardless of the final state of the Promise object. This method was introduced in the ES2018 standard.

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

In the code above, regardless of the final state of the promise, after the then or catch callbacks have been executed, the callback function specified by the finally method will be executed.

What exactly does Promise solve?

In work, you often encounter a requirement like this: for example, after sending an A request using AJAX, you need to pass the obtained data to a B request if the first request is successful; you would need to write the code as follows:

let fs = require('fs')
fs.readFile('./a.txt','utf8',function(err,data){
  fs.readFile(data,'utf8',function(err,data){
    fs.readFile(data,'utf8',function(err,data){
      console.log(data)
    })
  })
})

The above code has the following drawbacks:

The latter request depends on the success of the previous request, where the data needs to be passed down, leading to multiple nested AJAX requests, making the code less intuitive.
Even if the two requests don't need to pass parameters between them, the latter request still needs to wait for the success of the former before executing the next step. In this case, you also need to write the code as shown above, which makes the code less intuitive.

After the introduction of Promises, the code becomes like this:

let fs = require('fs')
function read(url){
  return new Promise((resolve,reject)=>{
    fs.readFile(url,'utf8',function(error,data){
      error && reject(error)
      resolve(data)
    })
  })
}
read('./a.txt').then(data=>{
  return read(data) 
}).then(data=>{
  return read(data)  
}).then(data=>{
  console.log(data)
})

This way, the code becomes much more concise, solving the problem of callback hell.