Elevating Web Performance: Lessons from The New York Times' React 18 Upgrade

In the ever-evolving landscape of web development, staying ahead of the curve is crucial. The New York Times' recent journey to enhance their website's performance using React 18 offers invaluable insights for developers and businesses alike.

This article delves into their process, challenges, and successes, providing a roadmap for those looking to achieve similar results in their projects.

The Need for Speed: Why Performance Matters

For a major news organization like The New York Times, web performance is more than just a technical concern—it's a core business priority. High performance translates to better user experiences, improved SEO, and ultimately, higher engagement. React 18's release promised significant advancements in these areas, making it a compelling upgrade for their flagship news site.

Key Benefits of React 18

Smoother Rendering with Concurrent Mode

React 18 introduces Concurrent Mode, which allows for simultaneous rendering of updates and user interactions. This leads to smoother animations, reduced screen jank, and a more responsive user experience. For any developer looking to create seamless and engaging applications, understanding and implementing Concurrent Mode can be a game-changer.

Automatic Batching and Transitions

With automatic batching, React 18 optimizes performance by grouping multiple state updates into a single render cycle. This reduces the workload on the main thread, enhancing overall efficiency. The new useTransition hook further ensures that state updates do not block the user interface, paving the way for more fluid interactions.

Exciting New Features

React 18 opens up new possibilities with features like server-side rendering and streaming updates through React Server Components. These advancements enable faster initial renders and more innovative UI patterns, which are essential for developers aiming to push the boundaries of what's possible on the web.

Overcoming Migration Challenges

The migration to React 18 wasn't without its hurdles. The New York Times team faced several challenges, from removing deprecated dependencies to adapting custom embedded interactives. Their methodical approach, including incremental updates and extensive testing, highlights the importance of a structured migration strategy.

Practical Takeaways for Developers

1. Prepare for Migration: Start by removing deprecated dependencies and updating your testing libraries to ensure compatibility with the latest framework versions.

2. Foundation Setting: Upgrade your project's dependencies, types, and tests to align with the new framework without immediately implementing all new features. This step sets a stable foundation for future enhancements.

3. Integration and Testing: Carefully integrate new APIs and functionalities, like createRoot and hydrateRoot, and conduct thorough testing to identify and resolve any issues.

Real-World Impact: Improved Performance Metrics

One of the most significant outcomes of The New York Times' upgrade to React 18 was the dramatic improvement in their Interaction to Next Paint (INP) scores, a critical metric for page responsiveness. This not only boosted their SEO rankings but also enhanced the overall user experience. For businesses relying on web performance for competitive advantage, investing in such upgrades can yield substantial returns.

Code Insights from the Migration

Handling Embedded Interactives

A challenge encountered was with embedded interactives, which required careful handling of scripts to avoid hydration mismatches. Here’s an example of how they extracted and replaced script tags:

Copy
1export const extractAndReplace = (html, id) => {
2  const SCRIPT_REGEX = /<script[\s\S]*?>[\s\S]*?<\/script>/gi;
3  let lastMatchAdjustment = 0;
4  let scriptlessHtml = html;
5  let match;
6  const scriptsToRunOnClient = [];
7  let scriptCounter = 0;
8
9  while ((match = SCRIPT_REGEX.exec(html))) {
10    const [matchText] = match;
11    if (matchText) {
12      let hoistedText = matchText;
13      let replacementToken = '';
14      ({ hoistedText, replacementToken } = addsPlaceholderScript(hoistedText, id, scriptCounter));
15      scriptCounter += 1;
16      const start = match.index - lastMatchAdjustment;
17      const end = match.index + matchText.length - lastMatchAdjustment;
18      scriptlessHtml = `${scriptlessHtml.substring(0, start)}${replacementToken}${scriptlessHtml.substring(end, scriptlessHtml.length)}`;
19      scriptsToRunOnClient.push(hoistedText);
20      lastMatchAdjustment += matchText.length - replacementToken.length;
21    }
22  }
23
24  return {
25    scriptsToRunOnClient,
26    scriptlessHtml,
27  };
28};
29
30const runScript = (clonedScript) => {
31  const script = document.getElementById(`${clonedScript.id}`);
32  script.parentNode.replaceChild(clonedScript, script);
33};

Ensuring Correct Script Load Order

For scripts to execute correctly, the order of appending and execution was crucial. Here’s how they managed the load order:

Copy
1export const getPriority = template => {
2  let priority;
3  try {
4    JSON.parse(template.innerHTML);
5    priority = 1;
6  } catch (err) {
7    priority = 2;
8  }
9  return priority;
10};
11
12scripts.sort((a, b) => getPriority(a) - getPriority(b));

Embracing the Future of Web Development

The journey of The New York Times underscores the transformative potential of leveraging the latest web technologies. By embracing React 18, they not only improved their current performance but also unlocked new opportunities for future innovation. Developers and businesses should take note of these advancements and consider how similar upgrades could benefit their projects.

Overcoming Specific Challenges with React 18

The New York Times team discovered several unexpected challenges when migrating to React 18. One notable issue involved their embedded interactives, which used dangerouslySetInnerHTML for custom HTML and scripts. React 18's stricter hydration requirements led to mismatches between the server-rendered and client-rendered DOM, causing fallback to client-side rendering and breaking some interactives.

Adapting Embedded Interactives

To tackle this, they developed a method to extract and re-append script tags manually. This approach ensured scripts would execute correctly, even with React 18's new hydration rules. Here’s a simplified example:

Copy
1const embeddedInteractiveString = `
2  <div id="server-test">server</div>
3  <script>
4    document.addEventListener("DOMContentLoaded", () => {
5      const serverTestElement = document.getElementById("server-test");
6      serverTestElement.textContent = "client";
7    });
8  </script>
9`;
10return <div dangerouslySetInnerHTML={{ __html: embeddedInteractiveString }} />;

However, with React 18, any modification to the DOM before hydration would trigger a fallback to client-side rendering. The team had to adapt by ensuring scripts were extracted and re-executed in the correct order to maintain functionality.

The Migration Process: Step by Step

1. Removing Deprecated Dependencies: The team first removed the outdated Enzyme testing library, migrating all test files to @testing-library/react. This was a significant effort, involving hundreds of test files and numerous pull requests, but it was necessary for compatibility with React 18.

2. Foundation Setting: Before integrating React 18 features, they updated all major dependencies, types, and tests to conform to the new framework. This step was crucial to ensure stability before enabling new functionalities.

3. Turning on the Engines: With the foundation set, they integrated React 18 APIs, such as createRoot and hydrateRoot. This enabled the new features, but also required careful handling of hydration mismatches, particularly for custom embedded interactives.

Real-World Impact and Performance Gains

After the successful migration, The New York Times saw immediate performance improvements. Their INP scores in the p75 range dropped by approximately 30%, indicating a significant boost in page responsiveness. This improvement was largely attributed to React 18's automatic batching and concurrency features, which reduced re-renders and enhanced user interactions.

Looking Forward: Future Enhancements

The integration of React 18 has already resulted in significant improvements, opening the door to further innovations. The team is now exploring new features like startTransition and React Server Components, aiming to continue improving their INP scores and overall site performance.

Based on their success, The New York Times plans to roll out React 18 upgrades across other sites, anticipating similar performance gains. They are also committed to addressing remaining hydration mismatches and refining their approach to embedded interactives.

Conclusion

The New York Times' experience with React 18 serves as a powerful example of the benefits and challenges associated with adopting the latest web technologies. Their methodical approach to migration, combined with a focus on performance optimization, highlights the potential for significant improvements in web development projects.

Incorporating these lessons and strategies into your projects can lead to substantial performance gains and a better user experience. Stay informed about the latest trends in web development, and consider how tools that support the latest frameworks, like our seamless Figma to React, HTML, Next.js, and Shopify conversion tool, can streamline your workflow and elevate your projects to new heights.