How to get warning free usage of useLayoutEffect when server-side rendering
useEffect and useLayoutEffect are React hooks that allow for the creation of side effects. They are a replacement for thecomponentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods on class components.
Kent C. Dodds has put together a great guide on when to use useEffect and when to use useLayoutEffect. TLDR: most of the time you will want useEffect
useLayoutEffect is put forward as the safest upgrade path for class components
useLayoutEffectfires in the same phase ascomponentDidMountandcomponentDidUpdate— React Documentation
However, if you use useLayoutEffect then you will get a nasty SSR console warning
function App() { useLayoutEffect(() => {…Crafting elegant and robust drag and drop animations
I work on an open source library that aims to provide a beautiful and accessible drag and drop experience for lists on the web (react-beautiful-dnd). One goal of the library is to provide a drag and drop experience that feels as if you were dragging physical objects around. The library tries to avoid any interactions where something immediately snaps from one place to another. Snapping breaks the visual language of moving physical objects around as it is not how physical objects behave.
Our tools and technology make it so easy to work remotely instead of taking a genuine sick day. But just because you can do something does not always mean that you should.
Last year I fell into a bad habit of working from home when I was sick. Rather than resting and giving my body and mind the space to heal, I would continue to work. Looking back, this was a poor choice as often the work I did was of lower quality and the work still came at a physical and mental cost.
My thinking has not stopped there…
Pull up a chair and warm your hands by the fire. Let me share with you three stories from my front-end performance adventures.
A bit of backstory
I work on react-beautiful-dnd at Atlassian. The library aims to provide a drag and drop experience for the web that feels more physical.
You can read an introduction to
react-beautiful-dndhere: Rethinking drag and drop
My first story: Moving naturally
When a user drops an item, react-beautiful-dnd uses a physics based animation to give the impression that the dropping item has weight.
One year ago, we at Atlassian released react-beautiful-dnd with the aim of creating a more beautiful and accessible drag and drop experience for the web 🎂🎉
react-beautiful-dndannouncement blog: Rethinking drag and drop
I wanted to take this opportunity to reflect on how far we have come in the last year, and the direction we are heading in.
A few statistics
I work on a drag and drop library for React: react-beautiful-dnd 🎉. The goal of the Atlassian library is to provide a beautiful and accessible drag and drop experience for lists on the web. You can read the introduction blog here: Rethinking drag and drop. The library is completely driven by state — user inputs result in state changes which then updates what the user sees. This conceptually allows for dragging with any input type. Doing state driven dragging at scale is full of performance traps. 🦑
We recently released version 4 of react-beautiful-dnd which contained some massive performance improvements…
Applying principles of physicality to pursue a more natural drag and drop experience
Recently at Atlassian we released react-beautiful-dnd: a library that aims to provide a beautiful, natural and accessible drag and drop experience for the web. It allows users to control the entire drag and drop experience using only a keyboard. I have previously written an introductory blog about the library and the thinking behind it.
We have just shipped the the ability to move items between lists. This feature has full keyboard support. …
Taking something basic and making it beautiful
Drag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.
Physicality
The core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best illustrated through contrast — so let’s explore some standard drag and drop behaviour and how we have tried to do better.
Normalised state and connected components
*Be sure to read Performance optimisations for React applications first!
I recently gave a talk at React Sydney in which I put forward some ideas and techniques to significantly increase the performance of your React applications (again). In the talk I address some of the style and performance pain points in the techniques I put forward in my original post. Following the updated recommendations can result in extremely significant performance improvements as well as increased loose coupling between components.
Key takeaways
I would suggest watching the talk first. To save you needing to take notes I have summarised some of the…
TLDR;
The main performance hotspot in React applications is redundant processing and DOM diffing in components. In order to avoid this return false from shouldComponentUpdate as high up in your application as you can.
To facilitate this:
- Make shouldComponentUpdate checks fast
- Make shouldComponentUpdate checks easy
Video
You can watch a video recording of me talking about about this topic on YouTube
Disclaimers!
The examples in this blog will be using React + Redux. If you are using another data-flow library the principles will apply but the implementation will be different.
I have not used an immutability library in this blog but only vanilla…
Alex Reardon
JavaScript enthusiast
