React on David Lang

Next.js App Router: Complete Migration Guide

Mon, 10 Jun 2024 00:00:00 +0000

Migrating from Pages Router to App Router unlocks RSC, layouts, and improved data fetching-but requires deliberate planning.

Folder Structure

app/
  layout.tsx      # Root layout
  page.tsx        # /
  blog/
    [slug]/
      page.tsx    # /blog/:slug
  api/
    hello/
      route.ts    # Route Handlers

Data Fetching

Replace getServerSideProps with async Server Components. Replace getStaticProps with fetch and revalidate options. Client data still uses SWR or React Query in Client Components.

React Server Components: The Future of Data Fetching

Sun, 20 Aug 2023 00:00:00 +0000

React Server Components (RSC) run on the server only-they never ship component logic to the client. That enables direct database access and smaller JavaScript bundles.

Server vs Client Components

// app/page.js - Server Component (default in App Router)
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Add 'use client' only when you need hooks, event handlers, or browser APIs.

Store additional user information in firebase using react and javascript

Sun, 28 May 2023 00:00:00 +0000

To store additional information for a user in Firebase using React and JavaScript, you typically use Firestore or the Realtime Database, as Firebase Authentication does not allow for arbitrary additional data to be stored directly in user profiles. Here’s a step-by-step guide on how to achieve this using Firestore.

Step 1: Set Up Firebase in Your React App

First, ensure that you have Firebase set up in your React application. You need to install Firebase and initialize it in your project.

Simple Notes app using React, TypeScript, Node.js, GraphQL and MongoDB

Mon, 17 Apr 2023 00:00:00 +0000

In the series of the blog post, I am going to walk through step by step process of building a Simple Notes App using React, TypeScript, Node.js, GraphQL , and MongoDB. During the process of our development, we are going to use some useful npm packages like Express, Apollo-Server, Typegoose, Mongoose, TypeGraphQL , and Bootstrap.

Here is the Github Source Code to run the application.

Table of Content

Dev Environment Setup

We are going to set up our initial codebase and folder structure to get started. In this tutorial, I am going to use the Windows environment. The command structure is mostly the same and can be easily replicated to macOS.

Mastering Chart.js in React: A Comprehensive Guide with Examples

Thu, 24 Nov 2022 00:00:00 +0000

Introduction:

In the world of web development, data visualization plays a crucial role in conveying information effectively. Chart.js, a popular JavaScript library, provides an elegant and flexible way to create interactive and visually appealing charts. In this blog post, we will explore how to integrate Chart.js into a React application and leverage its powerful features to create stunning charts. We’ll cover the installation process, basic usage, and provide practical examples to help you get started.

Differences between getServerSideProps and getStaticProps in Next.js

Tue, 11 Oct 2022 00:00:00 +0000

Introduction:

Next.js is a popular React framework that enables developers to create server-side rendered applications with ease. Two essential functions in Next.js are getServerSideProps and getStaticProps, which help developers pre-render pages and optimize performance. Although they share similarities, they have significant differences in terms of functionality and usage. In this blog, we will explore the differences between getServerSideProps and getStaticProps and provide real-world examples to help you understand their use cases.

Boosting Performance with useEffect: Best Use Cases and Examples

Wed, 14 Sep 2022 00:00:00 +0000

Introduction:

As a React developer, you’re likely familiar with the useEffect hook. It’s a powerful tool that allows you to manage side effects in functional components. While its primary role is to handle tasks like data fetching, DOM manipulation, and subscriptions, useEffect can also be a game-changer when it comes to optimizing your application’s performance. In this blog post, we’ll explore some of the best use cases of useEffect in improving performance, complete with sample code to help you get started.

Simplifying State Management with React's useContext Feature

Tue, 19 Jul 2022 00:00:00 +0000

Introduction:

React, being a popular JavaScript library for building user interfaces, provides various tools and features to handle state management. One such feature is useContext, which allows developers to share state across different components without prop drilling. In this blog post, we will explore the useContext feature in React and demonstrate its usage with a TypeScript example.

Understanding useContext:

The useContext hook is part of the React library and allows components to consume values from a provided context. It provides a simple and efficient way to share state between multiple components in a React application. By utilizing useContext, we can avoid passing props through intermediate components, thereby reducing the complexity of the codebase.

Efficient Data Flow in React: Unveiling the Power of Prop Drilling

Wed, 08 Jun 2022 00:00:00 +0000

Introduction:

React, the popular JavaScript library for building user interfaces, offers several powerful features that make it a developer-friendly choice. One such feature is prop drilling, a technique used for passing data from a top-level component to a deeply nested component. In this blog post, we will explore the concept of prop drilling, understand its benefits and limitations, and provide an example using TypeScript to demonstrate its usage.

What is Prop Drilling?

Prop drilling refers to the process of passing data through multiple layers of components in order to make it accessible to a deeply nested component that needs it. In React, components are organized in a hierarchical structure, where data typically flows from parent components to their children. However, when a component deeply nested in the component tree requires data from a top-level component, prop drilling comes into play.

Enhancing Web Performance with React's Lazy Loading Feature

Fri, 22 Apr 2022 00:00:00 +0000

Introduction:

In today’s fast-paced digital world, website performance plays a vital role in providing a seamless user experience. As web applications become increasingly complex, it’s crucial to optimize the loading time of our applications. One powerful technique to achieve this is lazy loading. In this blog post, we’ll explore how React’s lazy loading feature can significantly improve web performance by deferring the loading of non-critical components until they are actually needed.

React 18: Concurrent Features and the New Root API

Sat, 15 Jan 2022 00:00:00 +0000

React 18 introduced concurrent rendering, automatic batching, and a new root API. These changes improve perceived performance without rewriting your entire app.

createRoot

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

The legacy ReactDOM.render is deprecated. createRoot enables concurrent features.

Suspense and Transitions

useTransition marks updates as non-urgent-keeping the UI responsive during heavy re-renders:

const [isPending, startTransition] = useTransition();

function handleTab(tab) {
  startTransition(() => setActiveTab(tab));
}

Strict Mode Changes

Strict Mode double-invokes effects in development to surface side-effect bugs. Audit useEffect cleanup functions before upgrading.

Testing React Components with Jest and RTL

Thu, 15 Jul 2021 00:00:00 +0000

React Testing Library (RTL) encourages tests that resemble how users interact with your UI-queries by role, label, and text instead of implementation details.

A Simple Component Test

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments count on click', () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

What to Test

Focus on user-visible behavior: forms submit, errors display, loading states appear. Mock network with MSW (Mock Service Worker) instead of mocking fetch in every test.

Next.js: The Ultimate Guide to Server-Side Rendering

Wed, 20 Jan 2021 00:00:00 +0000

Next.js extends React with file-based routing, SSR, SSG, and API routes. Understanding when each rendering mode applies is essential for performance and SEO.

Rendering Modes

Static Generation (SSG) pre-renders at build time-ideal for marketing pages and blogs. Server-Side Rendering (SSR) renders on each request-best for personalized or frequently changing data. Client-Side Rendering (CSR) hydrates in the browser for highly interactive dashboards.

getServerSideProps Example

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

App Router (Preview)

Next.js 13+ introduces the App Router with React Server Components. Pages Router patterns remain widely used-know both as you maintain legacy and greenfield apps.

Getting Started with React Hooks: A Complete Guide

Sat, 15 Feb 2020 00:00:00 +0000

React Hooks arrived in React 16.8 and changed how we write components. Instead of class components for state and lifecycle logic, you can use functions with useState, useEffect, and more.

Why Hooks Matter

Hooks let you reuse stateful logic without higher-order components or render props. They keep related logic together-fetching data, subscribing to events, and updating the DOM live in one place instead of spread across lifecycle methods.

useState and useEffect

useState declares local state in a function component. useEffect runs side effects after render-API calls, subscriptions, or DOM updates.