Issue #18 - Writing future-proof CSS, force fast refresh in React Native, and understanding React's UI rendering process

Learn about streaming HTML, remounting react native components by forced fast refresh, dive into react server components, explore DOM events visually & test if you really understand JavaScript promises.

Tip of the day

Sometimes you might want to force the state to be reset, and a component to be remounted. For example, this can be handy if you're tweaking an animation that only happens on mount. To do this, you can add `// @refresh reset` anywhere in the file you're editing. This directive is local to the file, and instructs Fast Refresh to remount components defined in that file on every edit.

// @refresh reset --> ADD THIS COMMENT
function RemountComponentOnEdit {
    // ...
}

Articles

Streaming HTML

Chris explains what streaming HTML is, why should you care about it and in what type of scenarios it is actually useful.

by Chris Coyier

Why React Server Components Are Breaking Builds to Win Tomorrow

This article takes you through a journey of rendering in React, with the drawbacks and benefits of each pattern and how we got to React Server Components and how they aim to solve the problems faced by the previous patterns.

by Vishwas Gopinath

Tools

Defensive CSS

A set of CSS practices that designers and developers can use to write CSS that is future-proof, resulting in fewer bugs in user interfaces.

by Ahmad Shadeed

DOM Events

Learn about the DOM Event system through exploration in a graphical user interface.

by Alex Reardon

Tech Talks

Understanding React's UI Rendering Process

This talk examines how React implements a Virtual DOM to quickly render changes to the user interface. By the end of this talk the audience will know the basics of UI rendering with JavaScript through a Virtual DOM, understand React’s Reconciliation (the process of determining which Virtual DOM nodes should be turned into real DOM nodes) and have more confidence about the frontend technology decisions they make in their roles.

by Anthony Garritano

Quiz

What will be the output of the following code snippet? (Promises)

const prom = Promise.resolve('Promise resolved');

async function newFunc() {
  console.log('Starting new func');
  const res = await prom;
  console.log(res);
}

newFunc().then(() => console.log('New func resolved'));
console.log('End');

This week in GIF

I’ll just fix this little thing

Liked this issue? Share on Twitter or read previous issues.