Welcome to an your very own in-depth guide on performance optimization in React 19!

Whether you're an experienced developer or a beginner, this post is packed with useful information and tricks that will help you take action and make that React app blazing fast! *woosh*

React 19 brings a host of exciting features aimed at enhancing performance and developer experience. Here are some of the key highlights:

: Automates performance optimizations, reducing unnecessary re-renders and streamlining development​

: Enable server-side rendering for components, improving initial load times and overall performance​

: Including useFormStatus for better form handling and use for simpler custom hooks​

: Improved scheduling and prioritization for smoother user experiences​

: Better type inference and definitions, making type-safe development easier​

: A new way to handle imperative logic directly with the DOM

We'll start with the shiny new and improved server components, since this is probably the most exciting part of this article! Then, we'll move on to some info about lazy loading, virtualization, tree shaking, and finally, image optimization!

Suppose we are building a blog application where we want to display a list of posts fetched from a server. Using React Server Components, we can fetch the data and render the HTML on the server before sending it to the client.

For this example, our project files will be organized like this:

/src
  /components
    /client
      PostListClient.js
    /server
      PostListServer.js
      PostItemServer.js
  App.js
  index.js

First, we create our server-side components. These components will fetch data and render HTML on the server:



// src/components/server/PostItemServer.js
import React from 'react';
  const PostItemServer = ({ post }) => {
    return (
      <div>
        <h2>{post.title}</h2>
        <p>{post.body}</p>
      </div>
    );
};

export default PostItemServer;


// src/components/server/PostListServer.js
import React from 'react';
import PostItemServer from './PostItemServer';

const fetchPosts = async () => {
  // Simulate a data fetch
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  return posts.slice(0, 10); // Limit to 10 posts for this example
};

const PostListServer = async () => {
  const posts = await fetchPosts();

  return (
    <div>
      {posts.map((post) => (
        <PostItemServer key={post.id} post={post} />
      ))}
    </div>
  );
};
export default PostListServer;

Next, we create client-side components that will be used to integrate with the server-side components:

// src/components/client/PostListClient.js
import React, { useEffect, useState } from 'react';

const PostListClient = ({ serverComponent }) => {
  const [serverHtml, setServerHtml] = useState(null);
  useEffect(() => {
    const fetchServerHtml = async () => {
      const response = await fetch('/api/render-post-list');
      const html = await response.text();
      setServerHtml(html);
    };
    fetchServerHtml();
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: serverHtml }} />
  );
};

export default PostListClient;

We need an endpoint to render our server component and return the HTML. This is typically handled by your server setup (Node.js/Express, etc.).

Finally, we integrate our client-side component into the main application:

// src/App.js
import React from 'react';
import PostListClient from './components/client/PostListClient';

const App = () => {
  return (
    <div>
      <h1>My Blog</h1>
      <PostListClient />
    </div>
  );
};

export default App;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

: PostListServer fetches posts and renders them using PostItemServer. This component is rendered on the server.



: PostListClient fetches the pre-rendered HTML from the server endpoint and injects it into the DOM using dangerouslySetInnerHTML.



: An Express.js server serves the pre-rendered HTML when /api/render-post-list is called.



: The App component integrates the PostListClient, and ReactDOM.hydrate hydrates the HTML on the client side, making it interactive.


This setup ensures that the initial load is fast because the server sends the HTML for the post list, and the client hydrates it to make it interactive. This can significantly improve the performance of your application, especially for data-heavy pages.

Lazy loading defers the loading of components until they are needed, which significantly reduces initial load times in a lot of cases. 

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

For applications that render long lists, windowing can drastically improve performance by only rendering items that are visible on the screen. Libraries like react-window and react-virtualized are perfect for these scenarios, and here is how you can use them:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List height={150} itemCount={1000} itemSize={35} width={300} > 
    {Row} 
  </List>
);

This technique minimizes DOM nodes, which means we have reduced render time and therefore improved performance!

Tree shaking eliminates dead code from your bundle. This technique is especially useful in large applications where unused code can bloat your bundle size. Tools like Webpack help implement tree shaking efficiently, and it is done by default in projects built with Vite:



// Webpack configuration example
module.exports = {
  optimization: {
    usedExports: true //enable tree shaking
  },
};

And now with this configuration, let's assume we have this code in our React app:

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';

// import Button from './components/Button'; // Intentionally not used
const App = () => (
  <div>
    <Header />
    {/* <Button /> */}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

After running the build, you can verify that tree shaking has worked by checking the output bundle. The 

 component should not be included in the final 

In Vite, this is done automatically, but there are things that you can add to your vite configuration file that can decrease your bundle size. Here is an example:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'esbuild',
    sourcemap: false, // Disable sourcemaps for smaller bundles
    rollupOptions: {
      output: {
        manualChunks: undefined, // Allow Vite to manage chunk splitting
      },
    },
  },
});

Images are often the largest assets on a website, and add significant loading time to your final bundle, so optimizing them can greatly improve your app’s performance. If your app contains lots of them, you must definitely consider lazy loading images and using modern image formats like WebP and SVGs where possible:

import { LazyLoadImage } from 'react-lazy-load-image-component';

const ImageComponent = () => (
  <LazyLoadImage
    alt="A lazy loaded image"
    src="image.webp"
    effect="blur"
  />
);

export default ImageComponent;

 allows you to defer the loading of images until they are in the viewport, and that's a win for everybody since the initial loading time is decreased!

React 19 brings a whole bunch of new features and optimizations that can significantly enhance the performance of your apps. When we leverage server side rendering, lazy loading, tree shaking, virtualization, and the new React Compiler, we can ensure that our React apps are fast, efficient, and ready for the foreseeable future.

Don't take my word for it though, it's always good to read the docs with every update for more detailed insights and to stay updated with the latest in React development, so always keep an eye on 

Performance optimization for React 19 - all you need

Creating a responsive design system can be... let's say overwhelming, especially for beginners. But that's why you're here, and I'll make sure to help you understand everything you should need! In this blog post, we’ll dive into how you can leverage Tailwind CSS to create reusable class collections that adapt to different screen sizes.

Why use a fixed design system? Because this is a bit of effort that can save you a lot of time in the future, while still giving you the option to customize your UI as you please! It's what popular libraries like 

 do to make working with Tailwind easier, and what we'll also be doing today!

Tailwind is a utility-first CSS framework packed with CSS classes that you can use to build literally anything you can image, directly in your markup code, and unlike traditional CSS frameworks, Tailwind doesn’t provide components. It just offers low-level classes that allow you to construct your own designs without fighting to override styles, so what we're doing today might seem like a step backwards, but it's more like a "meet me in the middle" situation, where we leverage both tailwind and are able to have lightweight responsive "components".

If you don't quite understand what this means yet, let's just get straight to the point and build our responsive design system.

First things first, let’s get Tailwind CSS set up in your project. You can install Tailwind via npm:

npm install -D tailwindcss
npx tailwindcss init

 file where you can customize your Tailwind setup, but you probably already know this!

Tailwind CSS makes responsive design easy with its breakpoints, which can also be inserted into your markup and apply styles conditionally. The default breakpoints are:

✦

We'll be using these two directives to create reusable "components" for our Tailwind design system, so before moving on, let's also learn how they work!

 directive in Tailwind CSS is used to organize your styles into different layers. They help control the order in which your styles are applied, making it easier to manage and override them. Tailwind includes three layers: base, components, and utilities.

 directive allows you to extract a set of utility classes into a single class, making your code more 

 (Don't Repeat Yourself). This is particularly useful for creating reusable class collections, and will be the foundation of our design system.

Today we'll be setting up styles for the following items: 

Still, we'll be keeping things pretty basic, since the purpose of this post is to show you how design systems are set up and how they work in an app that uses Tailwind!

We use these utilities this to easily create reusable, responsive text styles.

@layer components {
  .heading {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800;
  }
  .subheading {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold text-gray-600;
  }
  .body-text {
    @apply text-base md:text-lg lg:text-xl text-gray-700;
  }
}

<h1 class="heading">This is a Heading</h1>
<h2 class="subheading">This is a Subheading</h2>
<p class="body-text">This is some body text. It’s nice and readable.</p>

Cards are essential components used in UI designs. Let’s make them responsive.


@layer components {
  .card-responsive {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
    @apply sm:flex sm:flex-col md:flex md:flex-row;
  }

  .card-header-responsive {
    @apply p-4 bg-gray-100;
    @apply sm:w-full md:w-1/3;
  }

  .card-body-responsive {
    @apply p-4;
    @apply sm:w-full md:w-2/3;
  }
}

<div class="card-responsive">
  <div class="card-header-responsive">Card Header</div>
  <div class="card-body-responsive">Card Body</div>
</div>

@layer components {
  .flex-responsive {
    @apply flex flex-col md:flex-row;
  }
}

<div class="flex-responsive p-4">
  <div class="w-full md:w-1/2">Left</div>
  <div class="w-full md:w-1/2">Right</div>
</div>

@layer components {
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
  }
}

@layer components {
  .p-responsive {
    @apply p-4 sm:p-6 md:p-8 lg:p-10;
  }

  .m-responsive {
    @apply m-4 sm:m-6 md:m-8 lg:m-10;
  }
}

<div class="p-responsive bg-gray-200">Responsive Padding</div>
<div class="m-responsive bg-gray-200">Responsive Margin</div>

If you've added all of these utilities neatly inside a CSS file, you'll have something that looks like this:

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

@layer components {
  .heading {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800;
  }

  .subheading {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold text-gray-600;
}

  .body-text {
    @apply text-base md:text-lg lg:text-xl text-gray-700;
  }

  .card-responsive {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
    @apply sm:flex sm:flex-col md:flex md:flex-row;
  }

  .card-header-responsive {
    @apply p-4 bg-gray-100;
    @apply sm:w-full md:w-1/3;
  }

  .card-body-responsive {
    @apply p-4;
    @apply sm:w-full md:w-2/3;
  }

  .flex-responsive {
    @apply flex flex-col md:flex-row;
  }

  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
  }

  .p-responsive {
    @apply p-4 sm:p-6 md:p-8 lg:p-10;
  }

  .m-responsive {
    @apply m-4 sm:m-6 md:m-8 lg:m-10;
  }
}

If you want to see this in action, I've created 

 that contains all of the above code! If you resize the viewport, you should see that none of our elements go out of bounds, and although they're not fancy or anything, they all look good even when being rendered on a small width!


You've made it this far, congrats! Hopefully, you now have a solid foundation for creating a responsive design system with Tailwind by using reusable class collections and the @apply directive!

Remember, this is just the baseline for building something really scalable and robust, which can improve development speed in the long run, but it is quite a big commitment, and might not be a good fit for every project, as with any approach!


See you next time, happy coding! 👋🏻

Building a responsive design system with Tailwind CSS

WebGL shaders are really freaking fascinating! If you’ve ever wondered how those mesmerizing visuals in modern web applications are created, you've come to the right place! In this blog post, we'll dive into WebGL shaders and how to display them using JavaScript. One thing to mention, don’t worry if you're new to this— this post is for everyone, and by the end, you'll have a full-screen shader running on your page!

Before we get into the code, which I'm very excited about, let's understand what WebGL shaders are. WebGL, short for Web Graphics Library, is a JavaScript API that allows you to render 3D graphics in a web browser. Shaders are basically small programs that run on your GPU, and are responsible for determining the final look of your graphics.

:  Processes each vertex's attributes (position, color, texture) in 3D models, transforming them to screen coordinates in the rendering pipeline.


: Calculates the color and other attributes of each pixel, determining the final appearance of surfaces in a rendered image.

In this post, we will focus on the fragment shader, which is where most of the visual magic happens.

We'll start by setting up a basic HTML file. Create an 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGL Shader</title>
<style>
  body, html {
    margin: 0;
    overflow: hidden;
    height: 100%;
  }
  canvas {
    display: block;
  }
</style>
</head>
  <body>
    <canvas id="glcanvas"></canvas>
    <script src="main.js"></script>
  </body>
</html>


This sets up a full-screen canvas where we will render our shader.

 file. This will contain the code to initialize WebGL, compile the shader, and render it to the canvas. Let's break it down step by step.

To make this as easy as possible for you to understand, I will be highlighting everything we do, why we do it, and how we do it.

First, we need to get a WebGL rendering context from the canvas.

async function main() {
  const canvas = document.getElementById("glcanvas");
  let gl = canvas.getContext("webgl");
  if (!gl) {
    console.error("WebGL not supported, falling back on experimental-webgl");
    gl = canvas.getContext("experimental-webgl");
  }

  if (!gl) {
    alert("Your browser does not support WebGL");
    return;
  }
  // Further steps will go here...
}
window.onload = main;


 We create a reference to our canvas element and attempt to get a WebGL rendering context.



 This context is necessary for all WebGL operations. It allows us to call WebGL functions to set up shaders, buffers, and draw operations.



 if necessary. If neither context is available, we alert the user.

 and insert this code for a fragment shader I found on 

precision mediump float;
uniform float iTime;
uniform vec2 iResolution;

#define t iTime
#define r iResolution.xy

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
    vec3 c;
    float l,z=t;
    for(int i=0;i<3;i++) {
      vec2 uv,p=fragCoord.xy/r;
      uv=p;
      p-=.5;
      p.x*=r.x/r.y;
      z+=.07;
      l=length(p);
      uv+=p/l*(sin(z)+1.)*abs(sin(l*9.-z-z));
      c[i]=.01/length(mod(uv,1.)-.5);
    }
    fragColor=vec4(c/l,t);
}
void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}

 Now that we have our shader stored neatly in this file, we can go ahead and fetch it and compile it into our JavaScript file:



async function fetchShader(url) {
  const response = await fetch(url);
  return await response.text();
}

async function main() {
  // Initialization steps... (previous step)

  const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    void main() {
      gl_Position = aVertexPosition;
    }
  `;

  const fragmentShaderSource = await fetchShader('shader.glsl');

  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);
  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error("ERROR compiling vertex shader!", gl.getShaderInfoLog(vertexShader));
    return;
  }

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);
  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error("ERROR compiling fragment shader!", gl.getShaderInfoLog(fragmentShader));
    return;
  }

// Further steps will go here...
}
window.onload = main;

 We fetch the fragment shader code from an external file and compile both vertex and fragment shaders.


 Shaders need to be compiled from source code into a form the GPU can execute. The vertex shader positions vertices, and the fragment shader determines pixel colors.



 We use fetch to load the shader code and WebGL functions createShader, shaderSource, and compileShader to compile it. Errors are logged if compilation fails.


With our shaders compiled, we need to link them into a WebGL program.


async function main() {
  // Initialization and shader compilation steps...
  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.error("ERROR linking program!", gl.getProgramInfoLog(shaderProgram));
    return;
  }
  gl.useProgram(shaderProgram);

  // Further steps will go here...
}
window.onload = main;

 We link the compiled vertex and fragment shaders into a single program.


 Linking creates a complete GPU program that combines the vertex and fragment shaders, allowing them to work together.


 We use createProgram, attachShader, and linkProgram to link the shaders. If linking fails, an error is logged.


We need to set up a buffer with vertex positions and instruct WebGL to draw the scene.


async function main() {
  // Initialization, shader compilation, and linking steps...

  const vertices = new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0, 1.0,
    -1.0, 1.0,
    1.0, -1.0,
    1.0, 1.0
  ]);

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Further steps will go here...
}
window.onload = main;

 We create a buffer to hold the vertex positions and bind it to the attribute in our vertex shader.

 Buffers store vertex data that the GPU uses to render shapes. We need to pass this data to the vertex shader.


 We use createBuffer, bindBuffer, and bufferData to create and fill the buffer. We then use getAttribLocation, enableVertexAttribArray, and vertexAttribPointer to bind the buffer to the shader attribute.

Finally, let's write the rendering loop. This will update the time uniform and draw the shader to the screen.


async function main() {
  // Initialization, shader compilation, linking, and buffer setup steps...

  const resolutionUniformLocation = gl.getUniformLocation(shaderProgram, "iResolution");
  const timeUniformLocation = gl.getUniformLocation(shaderProgram, "iTime");

  function render(time) {
    gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
    gl.uniform1f(timeUniformLocation, time * 0.001);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    requestAnimationFrame(render);
  }

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  }

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  requestAnimationFrame(render);
}
window.onload = main;

 We set the values for the uniform variables iResolution and iTime and start the rendering loop.

 Uniforms provide data that is constant across a single draw call. We use them to pass the canvas size and current time to the shader.


 We use getUniformLocation, uniform2f, and uniform1f to set the uniform values. The render function updates these values and draws the scene. The resizeCanvas function ensures the canvas size matches the window size, and requestAnimationFrame keeps the render loop running.


async function fetchShader(url) {
  const response = await fetch(url);
  return await response.text();
}

async function main() {
  const canvas = document.getElementById("glcanvas");
  let gl = canvas.getContext("webgl");
  if (!gl) {
    console.error("WebGL not supported, falling back on experimental-webgl");
    gl = canvas.getContext("experimental-webgl");
  }

  if (!gl) {
    alert("Your browser does not support WebGL");
    return;
  }

  const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    void main() {
      gl_Position = aVertexPosition;
    }
  `;

  const fragmentShaderSource = await fetchShader('shader.glsl');

  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);
  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error("ERROR compiling vertex shader!", gl.getShaderInfoLog(vertexShader));
    return;
  }

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);
  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error("ERROR compiling fragment shader!", gl.getShaderInfoLog(fragmentShader));
    return;
  }

  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.error("ERROR linking program!", gl.getProgramInfoLog(shaderProgram));
    return;
  }

  gl.useProgram(shaderProgram);

  const vertices = new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0, 1.0,
    -1.0, 1.0,
    1.0, -1.0,
    1.0, 1.0
  ]);

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  const resolutionUniformLocation = gl.getUniformLocation(shaderProgram, "iResolution");
  const timeUniformLocation = gl.getUniformLocation(shaderProgram, "iTime");

  function render(time) {
    gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
    gl.uniform1f(timeUniformLocation, time * 0.001);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    requestAnimationFrame(render);
  }

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  }

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  requestAnimationFrame(render);
}
window.onload = main;

If you followed all these steps, you can now open your 

 file in the browser and you should be able to see this wonderful animated shader rendered in a canvas element:

- WebGL was developed by the Khronos Group, the same folks behind OpenGL.

- Shaders can be extremely powerful, but they also come with performance caveats. Overusing complex shaders can slow down your application, especially on lower-end devices.

- WebGL 2.0 offers enhanced features like multiple render targets and 3D textures compared to its predecessor, WebGL 1.0.

- Always optimize your shaders by minimizing calculations inside loops and avoiding unnecessary operations.

- Debugging shaders can be tricky. Tools like WebGL Inspector and Chrome’s built-in WebGL debugging can be lifesavers.

And there you have it! You now have a full-screen shader running in your browser. Feel free to experiment with the shader code to create your own visual effects.



PS: If for some reason the code above is not running correctly for you, here is a 

David H.davidhaz.com

Getting started with WebGL shaders in JavaScript

Other Posts

Performance optimization for React 19 - all you need

Building a responsive design system with Tailwind CSS