A React context Provider will cause its consumers to re-render whenever the value provided changes.

// first render
<Provider value={1}>
// next render
<Provider value={2}>
// all consumers will re-render
<Consumer>{value => (/*...*/)}</Consumer>

This no big deal if you’re passing primitive values to value. If you pass 2 multiple times in a row, the consumers won’t re-render.

However, if you’re passing objects then you’ve got to be more careful. The following code will cause consumers to re-render every time the Menu renders, even if nothing in the Menu actually changed (perhaps the component that rendered Menu is changing state).


At my latest workshops I’ve been getting this question:

So does Suspense kill Redux?

First, that’s a rude way to put it. But I get it, the suspense is killing you — or maybe Redux.

Washington DC Workshop at Viget, October 4th, 2018

React Suspense is all about handling transitions between views that have asynchronous data requirements — which redux doesn’t even attempt to handle. But, to make that work, Suspense is incidentally concerned with handling client-side data — which Redux is very interested in.

If you haven’t heard about React Suspense, give Dan Abramov’s JSConf Iceland talk a few minutes of your time.

Basic Suspense Setup

There are three…

I want to show you a sweet image technique to improve the user experience on your site that’s probably more trouble than its worth without the right tools.

1. Create a traced SVG version of your image
2. Render that first with HTML
3. Apply a little CSS to help sell it
4. When the image loads, replace the SVG with the high res image

React is introducing a new context API that uses render props. I see a lot of questions come up at workshops, meetups, and on twitter about how to use render props outside of render, like in event handlers and lifecycle hooks.

A year and a half ago, when I was working on React Router v4, I was particularly interested in solving the “deep updates” problem once and for all. I created a library called “react-context-emission” (it later became “react-broadcast”) with a conceptually identical API to the new React Context API:

After using this pattern a bit, I really liked…

Being a software developer means a career of constant learning. That’s one of the things that keeps me here. Lately I see a lot of gatekeeping going on by developers I looked up to when I was learning. They particularly criticize the state of front-end development, that it’s gotten “too complicated.” The latest kerfuffle I got sucked into on twitter was over the idea that you don’t belong in this field if you don’t know that you can use a LINK tag to include styles.

When digital photography started to produce photos worth printing, the professional photographers of the day…

Today I’m announcing that I’m leaving React Training and React Router for a couple new adventures. (Edit: Michael is continuing both, so no worries!)

Just after releasing React Router v1, and after our talks at the very first React Conf, Michael Jackson and I decided to quit our jobs and start doing workshops on React as React Training. Our first official day of business was April 2nd*, 2015. It has been an incredible 33 months for me.

Michael and I pumped about the React Router v4 release at React Conf 2017

Michael is as intelligent as he is entertaining, which is what makes him so good at leading a workshop. I’ve learned a lot…

We’ve been teaching our Advanced React.js patterns workshop for well over two years now. We’ve done our best to give vocabulary to these patterns and help people understand when to use them.

Earlier this year we released our Advanced React.js online course that took all the patterns from the workshop and put them online.

Today, we’re making all of the Advanced React.js lectures free!

We encourage you to purchase the course to get access to the exercises and solution videos, that’s where you’ll really level up. But if you or your boss don’t have the budget, please enjoy these videos on the house with the link below!

React has a new feature coming that I think is pretty cool. It allows us to compose with React in places we couldn’t compose before. I can immediately see how it’ll affect some of our components and some of our exercises in our workshops and online courses. Here’s a video that gives you a run-down of how it works and why it matters … as far as I can tell anyway, it’s experimental!

Edit: Even though I said “this is experimental” on the previous line, my friend Dan Abramov really wants you to know more about that:

My wife and I just got through a huge remodel. We were beyond excited to show people the new digs. We showed my mother-in-law. She walked in the beautifully remodeled bedroom, looked up at the fantastically framed window and said: “No blinds?” 😐

Our new bedroom; holy crap it looks like a magazine picture. Also, no blinds.

I find myself with the same emotion when I’m talking about React. I’ll be getting through the first lecture of a workshop, showing off some cool new OSS, and invariably somebody says: “inline functions? I heard those are slow.”

It wasn’t always this way. But the last few months it comes up literally every day. As an…

Did you know about navigator.onLine? It’s just a little boolean that tells you if the user is online or not. It’s got near universal browser support. You can read more about it on MDN.

I really enjoyed this article a while back from Nolan Lawson: “Progressive Enhancement isn’t Dead, It Just Smells Funny”. He talks about building offline-first web applications. It’s pretty obvious, but in order to build an offline-first app you must first be able to know if your visitor is offline!

Rather than manage the event listeners imperatively every time I want to display a message to the…

Ryan Florence

Making React accessible for developers and their users at https://reach.tech with OSS, Workshops and Online Courses. (Formerly at React Training)

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