React helper-order components module 💌

In React helper-ordered components 💪🏼 I wrote about using higher-order components to aid development of React apps. Two examples were covered: logging props and renders. Since publishing that post I have put together these and a few more utilities into an npm module, published under the name rhocs.

At present there are 4 utilities. Each of them logs something whenever the wrapped components props change. Note that not every re-render will cause a log event—internal state changes will cause the component to re-render but does not cause the component to receive new props.

changedProps

Logs the props of a component that have changed. Helps you see why a component is being re-rendered from the outside, and perhaps to optimize away unnecessary props or changes.

props([selector])

Logs the props of a component, similar to changedProps, but not just the ones that changed. An optional selector, which may be a prop name, array of prop names, or function, can be used to log only certain props. You might think of this helper as a watcher for a components prop(s).

rerenderEvent

Logs each re-render event. If you’re looking at the log in the inspector, multiple contiguous re-render events will be grouped together with a count.

rerenderCount

Similar to rerenderEvent in that each re-render event is logged, but rerenderCount tracks and logs the total number of re-renders as well. It’s useful for monitoring re-renders independently for multiple instances of a component, or for when you care specifically about the count but other log messages are interspersed in the log thus causing the rerender log messages to be ungrouped.

If you have an idea for another helper, or an improvement to one of the existing helpers, pull requests are appreciated.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.