A rather geeky/technical weblog, est. 2001, by Bramus
Recoil is the State Management Library for React they use at Facebook. Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously Best to …
Continue reading “Recoil – An Experimental State Management Library for React”
The past few weeks I’ve been enjoying the newsletter of Remix, an yet to be released React Framework Remix is a web application framework for React from the authors of React Router: Michael Jackson and Ryan Florence. It provides APIs and conventions for server rendering, data loading, routing and more. You can also read some …
useWorker() is a js library (with typescript support) that allows you to use the Web Worker Web API, through React Hooks. This library allows you to run the expensive function without blocking the user interface, using a simple syntax that makes use of Promise import React from "react"; import { useWorker, WORKER_STATUS } from "@koale/useworker"; …
Continue reading “useWorker() – Use Web Workers with React Hooks”
To use Tailwind – or any prebuilt CSS library/framework for that matter – in a React app you can simply import its generated CSS file and use the classes it exposes: import ‘../tailwind.generated.css’; // … const Alert = ({ title = '', message }) => ( <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" …
Continue reading “Use Tailwind classes within any CSS-in-JS library with Twin”
React.memo()
I know I’ve posted a similar article before but this is a pitfall I commonly see and therefore it can’t be repeated enough. React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React.memo can help you to optimize the number of renders of your React components even further. …
Continue reading “React Performance Optimization with React.memo()“
The Facebook Engineering Team on how they’ve built the new Facebook.com – a version which I’ve been able to try for nearly two months by now. Throughout the process, we anchored our work around two technical mantras: As little as possible, as early as possible. We should deliver only the resources we need, and we …
Continue reading “Rebuilding our tech stack for the new Facebook.com”
An article that’s been making rounds on Twitter today is Second-guessing the modern web: There is a sweet spot of React: in moderately interactive interfaces. Complex forms that require immediate feedback, UIs that need to move around and react instantly. That’s where it excels. But there’s a lot on either side of that sweet spot. …
Nik Graf details a little trick I also use from time to time: changing the key of a React component to force remount it. Upon clicking a contact in the list, the active contact’s id is used as the key for the Detail component. <Detail key={activeContact.id} contact={activeContact} /> Using React’s Key Attribute to remount a …
Continue reading “Using React’s Key Attribute to remount a Component”
useImmer – A React Hook to use Immer to manipulate state
useImmer(initialState) is very similar to useState. The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an immer producer function, in which the draft can be mutated freely, until the producer ends and the changes will be made immutable and become the …
Continue reading “useImmer – A React Hook to use Immer to manipulate state”
The react-intersection-observer package is an easy way to work with the Intersection Observer API in React. It comes with both a Hooks, render props and plain children implementation. import React from 'react' import { useInView } from 'react-intersection-observer' const Component = () => { const [ref, inView, entry] = useInView({ /* Optional options */ threshold: …
Continue reading “useInView – A React Hook to work with IntersectionObserver”