Mark's Dev Blog

Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson
 Sponsor @markerikson

Mark's Dev Links - Issue #2

Posted on
#newsletter

This is a post in the Newsletter series.

Weekly newsletter, sent week of 2018-01-29

Hi, and welcome to issue #2 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

Last week I mentioned I wasn't yet sure what I was going to do about older newsletter issues. I've decided I'll try posting them on my blog after a 1-week delay, just for visibility. So, you'll be able to see them at both https://tinyletter.com/acemarke/archive and http://blog.isquaredsoftware.com/series/newsletter/ .

New React Context Implementation 🔗︎

The React team has been promising for the last few years that they would eventually implement a new replacement for the existing context API, which would both resolve the issues with the current behavior of context and also open up new possibilities. The RFC describing the new API was filed a couple months ago, and the RFC and corresponding React PR have just been merged. A few key points to note about this:

  • The API uses "provider/consumer" pairs, and is expected to be used with the "render props" form of component composition. It also does not rely on the use of PropTypes to declare values.
  • The new API will be released in React 16.3. If you'd like to try something similar, the React-Broadcast library has been updated to use an equivalent API already.
  • Updates to values will propagate even if there's a component in between that has returned false from shouldComponentUpdate
  • Andrew Clark and Kent Dodds had a Twitter conversation where Andrew confirmed that the new context API is considered a first-class feature, and should be stable going forward. Also, apparently the API will offer an advanced option for determining whether a given consumer should update, using bitmasking.

You might also want to check out the latest issue of Kent C Dodds's newsletter as well, as he gives a bigger overview of what context is and what's going on here. (And if you're not signed up for his newsletter already, you probably should go do so now.)

Why setState is Async 🔗︎

Several months ago, Michel Westrate filed a React issue asking for an explanation of why setState is async. This week, Dan Abramov wrote a fantastic, detailed response that explains how React handles batching, and the kinds of scenarios that require internal consistency for correct behavior. Highly recommended reading!

React-Scope 🔗︎

A new React devtool extension called React-Scope came out recently. It looks like it uses the same infrastructure as the React DevTools to show a live graph of your React component tree and their data. Seems to be a nice additional way to view the state of your application.

Kuker 🔗︎

Continuing the devtools theme: Krasimir Tsonev has released Kuker, a devtools extension that takes inspiration from the Redx DevTools. However, because it uses window.postMessage as the basis for its API, it can accept events and data captured from a variety of different sources. The author has already created adapters that draw data from Redux, MobX, Redux-Saga, DOM elements, and more.

Redux Ecosystem 🔗︎

Redux-Bundler 🔗︎

Henrik Joreteg, who helped lead development on Starbucks' new PWA, has just published his own higher-level abstraction over setting up Redux. I haven't had time to really dig through it indepth myself yet, but at first glance it looks very intriguing. It looks like it includes a bunch of different capabilities:

  • grouped action creators / reducers / selectors "bundles" in a form somewhat similar to the "ducks" pattern, with conventions for exposing them by name
  • the ability to merge bundles together to set up the Redux store
  • simplified binding of action creators by name, and references to selectors by name
  • lazy-loading of bundles at runtime
  • "reactor" logic that can trigger async behavior based on the current app state

It's already picked up 300 stars since Henrik announced it, and there's some fascinating concepts here that I'm going to have to investigate further.

Redux Issues Spotlight 🔗︎

Redux Addons Catalog - client-side UI? 🔗︎

My Redux addons catalog repo currently lists close to 2000 Redux-related libraries and tools - pretty much everything I've run across that looks useful. The downside to this is that there's many similar-looking libraries listed, and there's no easy way to compare them.

What I'd really love to see is an interactive site that parses the links in my list, and turns them into a client-side app that allows filtering, sorting, and comparing for the different libraries in each category, based on Github and NPM stats. There's plenty of prior art for sites like that already, and I've linked several relevant examples and useful pieces for building such a site in that thread. I don't have time to build something like this myself, but I would love to have someone put it together :) I think it would be a real help to the Redux community.

I just had a couple people contact me about working on this and it sounds like they're starting to do some initial project planning, so I'm really excited to see this idea moving forward!

Me, Myself, and I 🔗︎

I'm traveling on business for the next couple weeks, so that will keep me pretty busy - I generally don't have as much time to keep tabs on what's going on in the ecosystem while I'm gone. I'll do my best to keep the newsletter going, though - would be kinda silly to post the first couple and then suddenly pause :) (In fact, I'm writing this from 30K feet right now.)

I do have a couple things I'm excited about ahead in the next couple months, but I can't talk about them... yet :)

Wrapping Up 🔗︎

That's all for this week. At some point in the next couple weeks, I may give a bit of background for the mysterious map-like screenshots I was vague-tweeting about a few weeks ago :)

Obligatory Plug 🔗︎

My "Practical Redux" tutorial series is now an interactive course on Educative.io!. Right now, Educative is having a sale - all courses are 50% off with coupon code LEARN2018 . That includes not just my "Practical Redux" course, but many others as well. Check it out!

This is a post in the Newsletter series. Other posts in this series: