From the Next.js folks comes SWR, a React Hooks library for data fetching built on Suspense:
The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
It can avoid scenarios where you need to pass down a fetched user into several child components
Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and resolutionY props.
Alex Kondov, Tech Lead at Financial Times, has compiled a huge list of best practices when it comes to writing React.
This article is a collection of principles and rules that have proven to be effective for me and the teams I’ve worked with.
I outline good practices about components, application structure, testing, styling, state management and data fetching. Some of the examples are oversimplified so we can focus on the principle not on the implementation.
Although Alex warns that it’s an opinion and not an absolute, the TOC alone — except for the CSS-in-JS part 😛 — already has me nodding along:
When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, paddinggot in the way. So they set out to find a solution.
After a lot of trial and error, we landed on a system which is built on two components: FocusRing for declaring where a ring should be placed, and FocusRingScope for declaring a root position for rings to be rendered.
Here’s an example showing how the FocusRing works:
The FocusRing will capture focussing of the contained input, but will render the ring around the entire div. To have a FocusRing behave like :focus-within and respond to any descendant being focussed, you can set the within prop.
Just announced by the React Team are Server Components:
React Server Components are still in research and development. We are sharing this work in the spirit of transparency and to get initial feedback from the React community.
With Server Side Rendering the rendering of your app to HTML happens up front, gets sent to the client, and then needs to be hydrated once the bundle is loaded. After that the app becomes interactive and every change/render happens on the client. With React Server Components, the HTML for each component can be fetched several times from the server throughout the app’s lifecycle, and certain libraries that are only used on the server won’t ever make it into the bundle.
Knowing that the folks from Next.js are also involved makes this even more exciting …