The Loop

​

We’ve all been paying attention to the release of React 18, which promises to make significant improvements to the ever-popular web framework. Vercel recently released an informative article documenting some of the most powerful ways that React 18 can improve application performance:

• Concurrent Render works to free up the main execution thread, which directly improves Lighthouse scores in Total Blocking Time (TBT) and Interaction to Next Paint (INP)
  • It works by marking certain renders as non-urgent and yielding to the main thread every 5ms during low-priority component rendering
  • Unlike traditional rendering, the concurrent renderer can work in the background, handling multiple component tree versions without immediate commits
  • It optimizes UX by pausing and resuming rendering based on interactions, achieving efficient multitasking
• With the Transitions API, you can mark non-urgent updates using the useTransition hook, which indicates that certain state updates are “transitions” and can lead to visual changes that could potentially disrupt user experience if they were rendered synchronously
• React Server Components mark a new step in client/server-side rendering: using Server Components, you can transmit the serialized component tree to the client, at which point the client’s React renderer uses this format to construct the component tree without the requirement of HTML or JS bundles
• Though React Suspense existed prior to the release of React 18, this latest version does enhance Suspense’s capabilities, specifically in terms of data fetching:
  • Using Suspense, we can delay the rendering of a component until certain conditions are met
  • By declaratively defining loading states, we reduce the need for any conditional rendering logic
  • Using Suspense in combination with React Server Components allows us to directly access server-side data sources without requiring a separate API endpoint
  • The combination of suspense with React Server Component’s streamable format allows high-priority updates to be sent to the client as soon as they're ready, without waiting for lower-priority rendering tasks to complete

The GitHub blog recently released a helpful and informative article about using its popular AI-powered developer tool, GitHub Copilot. Here are some of the key takeaways:

• In the case where you are beginning with a blank file or empty codebase, it’s helpful to prompt Copilot with a high-level goal
• For example, write a comment that instructs Copilot to use Next.js to create a markdown editor using React hooks to manage state
• After this, break your code down into short, simple, and specific steps, with the goal of receiving a short output from Copilot after each step
• It helps to give Copilot an example or two of what you are specifically trying to achieve; in the case of a data transformation, for example, show Copilot how you would like the transformed data to look

As of Docker Compose 2.20 and Docker Desktop 4.22, Docker has a new attribute, include, which aims to improve Compose files’ modularity and reusability. Here’s what you need to know to start taking advantage of this new functionality today:

• You can reuse an existing Compose file using the extends mechanism, which is a good solution when you are aware of the file’s inner workings, but in the case that you want to use someone else’s configuration and don’t know about its internal dependencies, this approach won’t work
• One potential solution to this issue is to merge compose files together, but this method faces challenges in resolving relative paths
• The include attribute acts as if you have copied and pasted the other compose file that you want included in yours, while also accounting for relative path discrepancies so that they will be run from their original locations

CSS’s display property has a new multi-keyword syntax, as described in CSS Display Module Level 3. While display features built-in backwards compatibility, it’s also vital to get acquainted with the newer syntax and the reasoning behind it

• In addition to the traditional function of indicating whether an element is block-level or inline-level, now display also indicates the formatting context inside the box it is applied to
• The multi-keyword approach facilitates the creation of responsive designs and allows developers to achieve diverse layouts without relying heavily on positioning and float properties
• Currently available in all major browsers, this new functionality can make achieving complex layouts easier than ever

Next.js 13’s cookies() and headers() features are powerful new functions for server components.

• They allow us to access cookies and headers from anywhere in the React tree (as long as they’re in a server component)
• You can call headers in a server component like this:

const host = headers().get(‘host’);

• These functions work through a node.js module called async_hooks, which allows you to make data available from anywhere inside code that runs “beneath it”; you can think of this module as something like a React Context, but in node.js
• A real-life use case for these functions is a project in which you need to access the headers in a middleware: rather than passing the request object down the function stream, you can access the headers directly in the middlewares

Stay ahead of the curve with Econify's newsletter, "The Loop." Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation, this newsletter is your go-to source for all things cutting-edge in the tech industry.

The Loop is written and edited by Hank Mason, John Kaufmann, Noah Gribbin, Victoria Lebel, Chris Breen, and Marie Stotz.