In this section, we explore the world of programming, algorithms, networks, and infrastructure
React’s built-in hooks like useState and useEffect are powerful tools for managing state and side-effects. This article introduces the concept of custom hooks by building useStorageState — a reusable hook that synchronizes component state with the browser’s localStorage. We explore naming conventions, return patterns, and how to make hooks flexible and maintainable.
In React, components must return a single root element. To avoid unnecessary DOM wrappers, we use Fragments. This article explores how to use React Fragments and their shorthand syntax, and how to refactor a specialized Search component into a reusable InputWithLabel component with flexible props and cleaner structure.
React components can be composed like HTML elements using opening and closing tags. This article explores how to use the children prop for flexible content injection, and how to imperatively access DOM elements using useRef and useEffect. We refactor a reusable input component to support both declarative and imperative focus control, demonstrating the power of composition and lifecycle hooks.
Inline handlers in React allow you to execute functions directly within JSX. This article demonstrates how to use inline handlers to remove items from a list. Using useState, callback handlers, and the filter method, we manage a dynamic list and define removal logic directly in JSX using arrow functions or bind. We also explore when to extract handlers for better readability.
In React, data is often fetched asynchronously from external sources. This article demonstrates how to simulate asynchronous data fetching using Promises and useEffect. We start with mock data, introduce a delay to mimic network latency, and manage state updates with useState. This is the first step toward integrating real APIs into React applications.
Conditional rendering in React is a powerful tool for controlling what appears in the UI based on different states. This article explains how to show a “Loading…” message while asynchronous data is being fetched, and how to display an error message if the request fails. Using useState and useEffect, we manage isLoading and isError flags, and render content dynamically using ternary and logical operators.
While useState is ideal for simple state updates, React’s useReducer hook offers a more scalable solution for managing complex state transitions. This article demonstrates how to migrate story-related state from useState to useReducer, handle multiple actions like setting and removing stories, and refactor reducer logic for clarity. It’s a foundational step toward building robust, declarative state logic in React applications.
Using multiple useState hooks to manage related states like data, loading, and error can lead to impossible states — combinations that should never occur in a well-designed UI. This article shows how to consolidate related states into a single useReducer hook, enabling predictable transitions and eliminating bugs like simultaneous loading and error indicators. By structuring state as a complex object and dispatching clearly defined actions, we gain control and clarity in asynchronous data flows.
In the initial implementation, every keystroke in the search field triggered a new API request. This article demonstrates how to shift to explicit data fetching in React, where data is only fetched when the user clicks a confirmation button. By separating the searchTerm and url states, and using useCallback and useEffect, we gain full control over when API requests are sent.
This article explores how to replace the native fetch API with the more stable and feature-rich Axios library for data fetching in React. It also demonstrates how to refactor promise-based code using async/await and try/catch blocks for improved readability and error handling. These techniques enhance compatibility with older browsers, improve testability, and simplify asynchronous logic.
react-forms-Forms are essential in modern applications. This article walks through building a search form in React using input and button elements. First, we use the onSubmit attribute to manage form submission, then introduce the action attribute to align with native HTML behavior. This structure improves accessibility, readability, and prepares the app for future React updates.submit-search-with-onsubmit-and-action
This article walks you through creating a modern Next.js project using the official create-next-app CLI. With a single command, you can scaffold a project preconfigured with TypeScript, Tailwind CSS, App Router, and Turbopack. We’ll also cover folder structure, TypeScript and ESLint setup, and configuring absolute import aliases for cleaner code.
