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 …
Sidney Alcantara who works on Firetable, a product which features a data grid and an adjacent side drawer. When clicking a cell in the table, the side drawer opens with info about the current cell. Initially they lifted up the state, but that caused performance issues:
The problem was whenever the user selected a cell or opened the side drawer, the update to this global context would cause the entire app to re-render. This included the main table component, which could have dozens of cells displayed at a time, each with its own editor component. This would result in a render time of around 650 ms(!), long enough to see a visible delay in the side drawer’s open animation.
After exploring to split the context, or resort to useMemo/React.memo they settled on useRef to solve this.
Sara Vieira (@NikkitaFTW) published her book “The Opinionated Guide to React”. It’s 190 pages of React Recipes and Code Examples.
This book is my personal map of the tips, power-ups and not-so-obvious solutions to common questions and problems that I’ve come across during 4 years of React development. I have been finding some of the cheat codes and share them with you.
Even though I’m a seasoned React Developer, I’ve bought the book as: