Loading…
React fundamentals, hooks, state management, component architecture, performance optimization, and modern frontend development.
June 3, 2026
React Fundamentals: DOM, Virtual DOM, and Declarative Programming Explained Introduction React is one of the most popular technologies in web development today. Before learning components, hooks, and state management, it is important to understand the problem React was created to solve. As web applications became more interactive, developers found themselves writing increasing amounts of code just to keep the user interface synchronized with application data. React introduced a different way of thinking about UI development by embracing declarative programming and automated rendering. How Browsers Render Web Pages When you visit a website, the server sends HTML, CSS, and JavaScript to the browser. The browser first parses the HTML and builds a structure known as the Document Object Model (DOM). The DOM is a tree-like representation of every element on the page. The browser combines the DOM with CSS information, builds a render tree, and finally paints pixels on the screen. Whenever the DOM changes, the browser may need to recalculate layouts and repaint parts of the page. This process is one of the reasons UI updates can become expensive in large applications. Imperative Programming Imperative programming means telling the computer exactly how to perform a task. Imagine giving instructions to a robot: 1. Move forward. 2. Turn left. 3. Pick up the box. You are describing every step required to achieve the outcome. Traditional JavaScript DOM manipulation follows the same approach. Here we manually tell the browser what should change. This works well for small applications, but as the number of UI elements and states grows, manually tracking every change becomes difficult. Declarative Programming Declarative programming focuses on describing the desired outcome rather than the individual steps required to achieve it. Instead of telling the browser how to update the interface, we describe what the interface should look like. We simply describe the desired UI for a particular state. React determines the necessary DOM updates behind the scenes. React is declarative, but it still performs imperative DOM operations internally. The difference is that React performs those operations on our behalf. Why React Exists As applications become more interactive, developers must manage loading states, API responses, user interactions, form validation, and navigation. Manually updating the DOM for every possible state quickly becomes error-prone. React's core idea is simple: The UI should be a function of application state. Whenever state changes, React recalculates what the UI should look like and updates the browser accordingly. What is the Virtual DOM? React maintains an in-memory representation of the UI called the Virtual DOM. When data changes: React creates a new Virtual DOM tree and compares it with the previous one. This comparison process is called diffing. After identifying the differences, React updates only the parts of the real DOM that actually changed. The Virtual DOM does not eliminate DOM updates. Instead, it helps React perform fewer and more efficient updates. Summary In this article we learned how browsers render pages, the difference between imperative and declarative programming, and why React introduced the Virtual DOM. These concepts form the foundation for understanding how React applications are built and rendered.
June 3, 2026
Understanding JSX, Components and Pure Rendering in React Introduction In the previous article, we explored why React exists and how it simplifies UI development through declarative programming. The next step is understanding how React applications are actually written. When developers first encounter React, they often see unfamiliar concepts such as JSX, transpilation, components, and Vite. While these terms may sound complicated, they solve very practical problems that arise when building modern web applications. In this article, we'll explore the tools and concepts that make React development possible. Creating a React Application with Vite A common way to create a React application today is: The setup wizard allows you to choose a framework, language, and project configuration. Once complete, Vite creates a project structure and configures the tooling required to build and run a React application. What is Vite? Vite is a build tool and development server. Modern browsers understand JavaScript, but React applications often contain JSX, TypeScript, modern JavaScript features, and imported modules that require processing before they can run efficiently in production. Vite handles this complexity for us. It provides: Fast development server Hot Module Replacement (HMR) Production builds Asset optimization Module bundling By default, the development server runs on port 5173. One of Vite's biggest advantages is startup speed. Instead of rebuilding an entire application every time a file changes, it updates only the affected modules. Vite vs Next.js A common misconception is that Vite and Next.js are competitors. They actually solve different problems. | Vite | Next.js | |--------|--------| | Build Tool | Full Framework | | Development Server | Routing | | Bundling | Server Side Rendering | | HMR | API Routes | | React Support | Full Application Platform | Vite helps developers build React applications. Next.js helps developers build complete production applications using React. You can think of Vite as a tool in your toolbox, while Next.js provides an entire architecture for building applications. What is JSX? One of the first things new React developers notice is that React code often looks like HTML inside JavaScript. This syntax is called JSX, which stands for JavaScript Syntax Extension. JSX is not HTML. It is a syntax that makes it easier for developers to describe user interfaces using familiar markup-like structures. Without JSX, UI definitions can become difficult to read. Why Browsers Cannot Understand JSX Browsers do not understand JSX directly. If a browser encounters JSX code, it has no idea how to execute it. This is why React projects require a build step. Before the code reaches the browser, JSX must be transformed into standard JavaScript. What is Transpilation? The process of converting one form of source code into another form of source code is called transpilation. A transpiler takes code written in JSX and converts it into plain JavaScript. Historically, Babel became one of the most popular tools for this purpose. For example: can be transformed into: Understanding this transformation helps developers realize that JSX is simply a more convenient way of writing JavaScript. Expressions vs Statements in JSX One of the most common beginner questions is why certain JavaScript syntax works inside JSX while other syntax does not. The answer lies in understanding expressions and statements. A statement performs an action. An expression produces a value. JSX can only contain expressions because expressions evaluate to values that React can render. This is why the following code is invalid: Instead, we use a ternary expression: Components React applications are built using components. A component is a reusable piece of UI. Instead of repeatedly writing the same markup throughout an application, developers can create reusable components and compose them together. This approach makes applications easier to maintain and reason about. Pure Functions To understand React rendering, we first need to understand pure functions. A pure function always returns the same output for the same input. No matter how many times this function is executed, identical inputs always produce identical outputs. Now consider: This function depends on external state. If the value of tax changes, the same input can produce a different output. This makes the function impure. Why React Loves Pure Rendering React's rendering system works best when UI output depends only on props and state. This predictability allows React to efficiently determine when updates are required. Many tutorials say: Components are pure functions. While this is useful as a teaching simplification, it is not entirely accurate. The Important Nuance Components may contain: API requests Timers Event handlers Logging Local storage access All of these are side effects. React does not require the entire component to be pure. Instead, React expects the render phase to be pure. Given the same props and state, rendering should produce the same UI output. This principle makes React applications more predictable and easier to debug. Summary In this article we explored Vite, JSX, transpilation, expressions versus statements, components, and pure rendering. These concepts form the foundation for writing React applications and understanding how React transforms code into user interfaces.
June 3, 2026
React Props, Synthetic Events and the Virtual DOM Explained Introduction A React application becomes useful when users can interact with it. Buttons must respond to clicks, forms must capture input, and components must communicate with one another. React provides a consistent model for handling these interactions through props, events, and rendering. In this article, we'll explore how components communicate, how React handles browser events, and what happens when user interactions trigger UI updates. Understanding Props Props are one of the most fundamental concepts in React. If components are functions, props are simply the arguments passed to those functions. Inside the component: The component receives the value and uses it to render UI. This allows components to be reused with different data. Why Props Matter Imagine building an application with hundreds of buttons. Without props, you would need a separate component for every variation. Props allow a single component to behave differently based on the data it receives. This is one of the reasons React applications remain maintainable as they grow. Children is Just Another Prop Many developers initially think children is a special React feature. In reality, it is simply another prop. React internally treats this similarly to: The children prop enables component composition, one of React's most powerful design patterns. Browser Events Whenever a user interacts with a webpage, the browser generates events. Examples include: Clicks Keyboard input Mouse movement Form submission These events allow JavaScript applications to react to user actions. Event Bubbling One important characteristic of browser events is that they bubble upward through the DOM tree. Imagine the following structure: When the button is clicked, the event first occurs on the button and then travels upward to its parent elements. This process is known as event bubbling. Event Delegation Because events bubble, developers can often attach a single event listener to a parent element instead of attaching listeners to every child. This technique is known as event delegation. It reduces memory usage and simplifies event management for large lists and tables. React Synthetic Events Historically, browsers implemented events differently. Code that worked correctly in one browser might behave differently in another. To solve this problem, React introduced Synthetic Events. When a browser generates a native event, React intercepts it and creates a standardized Synthetic Event object. This provides a consistent API across different browsers. React still relies on native browser events underneath, but developers interact with the Synthetic Event abstraction. Handling Events in React React event handlers look similar to native JavaScript event handlers. When the button is clicked, React executes the provided handler. This interaction often triggers state updates, which eventually cause a re-render. Why Components Render Twice in Development Many beginners are surprised when they see a component render twice during development. This behavior usually occurs because React Strict Mode intentionally performs additional renders. The goal is to identify: Side effects during rendering Unsafe patterns Violations of rendering purity This behavior exists only in development and does not occur in production builds. React Rendering Cycle Whenever props or state change, React begins a rendering cycle. React recalculates the component output, compares the new Virtual DOM with the previous version, and updates only the parts of the real DOM that changed. This process allows React applications to remain responsive even as they grow in complexity. Summary In this article we explored props, children, event bubbling, event delegation, Synthetic Events, Strict Mode rendering, and the React rendering lifecycle. Together these concepts explain how React applications receive data, respond to user actions, and efficiently update the user interface.
June 3, 2026
Understanding React State, Hooks, and Suspense Introduction In the previous articles, we learned why React exists, how JSX works, and how React renders user interfaces. The next step is understanding how React components become dynamic. A static component always renders the same output. Real applications, however, need to respond to user interactions, API responses, and changing data. This is where hooks and state come into the picture. In this article, we'll explore React Hooks, component state, the useState hook, and how modern React uses Suspense and use() to handle asynchronous data. --- What Are Hooks? Hooks are functions that add special functionality to React components. By convention, all hooks start with the word use. Some common examples include: Hooks allow React components to: Store state Perform side effects Access context Optimize performance Work with asynchronous data Without hooks, React function components would simply be functions that return JSX. Hooks give components additional capabilities while keeping them as functions. --- What is State? State is the data a component owns at any given moment. Consider a counter component. Initially: After a button click: The count value changes over time. This changing data is called state. A useful way to think about state is: State represents the current memory of a component. Whenever state changes, React updates the user interface to match the new state. --- Adding State with useState The simplest way to add state to a component is through the useState hook. Whenever setCount is called, React updates the state and schedules a re-render. --- State Updates Demonstrate Declarative Programming State updates are one of the best examples of React's declarative model. In traditional JavaScript, we might manually update the DOM: In React, we update state instead: We simply describe the new state. React determines what changed and updates the DOM for us. --- What Happens When State Changes? When a state update occurs: React performs the following steps: 1. State changes. 2. The component renders again. 3. React creates a new Virtual DOM. 4. React compares the old and new Virtual DOM trees. 5. The browser receives only the necessary updates. --- The Traditional Way of Fetching Data For many years, React applications fetched data using useEffect. The component renders before the data is available and renders again once the data arrives. --- Enter Suspense Suspense allows React to display fallback content while a component is waiting for something. If the wrapped component is not ready, React displays the fallback UI until rendering can continue. --- The use Hook Modern React introduces the use() hook for reading asynchronous values. If the promise has not completed, React pauses rendering and lets Suspense display a fallback. When the promise resolves, React retries rendering and provides the data. --- useEffect vs use + Suspense useEffect The component renders before data is available. use + Suspense The component only renders when the required data exists. --- Summary We learned: Hooks add special functionality to components. Hooks always begin with use. State represents a component's data at a particular moment. useState is the simplest way to add state. Updating state is a great example of declarative programming. Suspense provides loading fallbacks for asynchronous rendering. use() and Suspense allow components to wait for data before rendering. Unlike useEffect, modern React can delay rendering until the required data is available.