React helper-order components module 💌

Drew Goodwin
May 19, 2017 · 2 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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