Redux module patterns
app state, view state and regional state
separating components and containers
and code-splitting reducers
I was hacking my custom middleware into the webpack-dev-server like this:
// start.js // use custom serverSideRender middleware with webpack-dev-server const serverSideRenderMiddleware = require('./ssr-middleware') // Copy the defaultFeatures logic from webpack-dev-server. We need to hack the
In our aging react code base we had been using
componentWillRecieveProps for situations where we wanted to recalculate "stuff" when props change. Recent versions of react renamed this method to
UNSAFE_componentWillRecieveProps for a variety of reasons. We recently went through an exercise where we tried to kill
UNSAFE_componentWillRecieveProps once and for all.
The following is a contrived example of how to refactor such a component.
Here's a button component that uses
UNSAFE_componentWillReceiveProps to keep its internal state in sync with the external props.
Binding specific values to events is a common occurrence in a React application. Let's kick this off with a common example. Here we have a
<Button /> that calls a click handler with a specific argument:
entity. There are several things wrong here.
Note: we will be refactoring this example as we go along.
Our applications have grown organically and our current collection of actions, reducers and selectors are due for an upgrade. This document is an attempt to outline an better way to organize our redux code.
The biggest changes here are the introduction of "modules" and redux-sagas.
The React community is moving away from HOC (higher order components) in favor of render prop components (RPC). For the most part, HOC and render prop components solve the same problem. However, render prop components provide are gaining popularity because they are more declarative and flexible than an HOC.
IntersectionObsever) in a React app
The Lighthouse performance audit tool recommends lazy-loading offscreen images (and other content)
They go a step further and recommend using the new IntersectionObserver API to manage offscreen content. Of course, you need to use a polyfill to target old browsers (core-js doesn't offer a polyfill).
The documentation provided by the Lighthouse team warns against over-applying the IntersectionObserver. The have a whole section devoted to explaining why you don't want to [intersect all the things](https://developers.google.com/web/updates/2016/04/intersectiono
Here are some good rules for a high-quality react-redux app.
We're in the process of reworking our app to make it more maintainable. In a previous meeting we discussed the general rules of thumb for writing maintainable code. Here we're going to be covering rules of thumb for writing good components.