How to get warning free usage of useLayoutEffect when server-side rendering

Photo by Caleb George on Unsplash

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 as componentDidMount and componentDidUpdateReact Documentation

However, if you use useLayoutEffect then you will get a nasty SSR console warning


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.

Photo by Joshua Newton on Unsplash

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-dnd here: 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-dnd announcement 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


Photo by James Padolsey on Unsplash

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

Pursing natural movement between lists

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

introducing react-beautiful-dnd

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:

  1. Make shouldComponentUpdate checks fast
  2. 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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store