Skip to content

Instantly share code, notes, and snippets.

@kylpo

kylpo/blog.md Secret

Created Jun 25, 2017
Embed
What would you like to do?

A Standard and Naming Convention for Immutable Components

An "Immutable Component" is a component that, after rendering once, can not re-render (i.e. it has shouldComponentUpdate() { return false }).

See this writeup if you'd like more information on shouldComponentUpdate

When Are Immutable Components Useful?

Many of your components will need to live and respond to prop or state updates, but there are also likely components that are never updated. Perhaps it is a layout component used for spacing, or a header component with a fixed label. Why should these unchanging components re-render(), slowing down the javascript thread? They shouldn't! They should be immutable components.

The Problem

React's mechanism to create immutable components is within a component's shouldComponentUpdate() method, but often this power exists at the wrong level. As a component, I don't always know that I should not re-render. As that component's parent, however, I might have more context to know if that component can safely be immutable.

Also, since immutable components prevent re-renders of their children, I should probably know how to identify them. Can you tell me which of these components do not re-render?

https://gist.github.com/b2a2c4c26b6ea7da553d4f6a60446d6c

I can’t either. I need prior knowledge of the components, or I need to read through their implementation.

Introducing the <IMMUTABLE> Standard and Naming Convention

The standard is to export a version of your component that sets sCU => false. This way, we're empowering the component's parent to make the performance optimization.

The convention is to call that immutable component something in all caps, like IMMUTABLE.

Export an UPPER_CASE version of your component that sets sCU => false

https://gist.github.com/8a4463e314bc7a43434fedff3f9242fa

Notice how much easier it is to identify the immutable components?

It Gets Better

Can you spot the error(s) in this render?

https://gist.github.com/96e1134b6b5bbd225db5f0b73c43cd9a

Yes! Because immutable components also prevent their children from re-rendering, they should probably not have non-immutable children.

Even Better with Tooling

Naming conventions enable tooling. I've edited my vim color scheme to style immutable components the same as immutable values (e.g. boolean, number).

more conventions => more helpful tooling

Future

I would love for React to handle this standard automatically. Just like react handles lowercase components (e.g. <div />) differently from PascalCase composite components, it could also auto-handle UPPER_CASE components.

And how about going one step further in empowering a component's parent by specifying per-prop immutability?! Immutable props would be skipped from the shouldComponentUpdate() check.

https://gist.github.com/0eb54b5509c108f66c351453ed346443

Perhaps a babel plugin could come along to handle immutable components and props in the meantime?

Other naming conventions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment