My Two Favorite React TricksPublished See discussion on Twitter
There are generally two rarely used patterns in React that I really enjoy getting to use in applications that I work on.
These both are:
- Throwing within a state setter
key is one of those early concepts that you learn that seems to only
be documented for use within lists. However it is an incredibly useful feature
that most developers don't use when building applications!
If you ever find yourself realizing that you need to reset the state, or refs,
of a particular component based on some value in the parent a
key that can be
changed on the component is a really useful way to do so!
I've generally recommended this for updating components that may perform some computation when the component mounts, but doesn't re-compute that operation at a later point in time.
Throwing Within A State Setter
I've written about this concept briefly in my post on React Error Boundaries, however I figured I'd write about the concept in another post since I really enjoy this feature.
If you ever find yourself wanting to trigger an error boundary from an event
handler, or even an asynchronous function call (e.g. within a promise callback,
or another microtask), you can call a
setState function with a function that
throws in the body!
I use this pattern so often that I usually add a
useErrorBoundary hook in most
of my side projects: