React Native’s base set of components are amazing! <View> enforcing flexbox and defaulting to {flexDirection: 'column', position: 'relative'}? So smart. It is such a successful set of components and constraints that web developers (like me) are bringing them to the web. …

ref is one of two special props in React — the other being key — because it isn't really a prop. Instead of being passed in to the associated component as a this.props.ref, …

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…

React.cloneElement() allows us to clone a runtime element (not the class), and apply an enhancement to it. The code above renders a div with the onPress wired up. It is a contrived example, as a we can just pass in an onPress directly to the div, but what if…

A “Null Component” is a component that returns null, and likely uses lifecycle hooks to make side effects. (I got the name from this oooold issue) Can You Spot Them? Can you tell me which of these components renders nothing? I can’t either. I need prior knowledge of the components, or I…

“A Higher-Order Component” What does that mean? “Well, if a higher-order function is a function that takes a function and returns a new function as the result, then a higher-order component must be a component that takes a component and returns a new component as the result, right?” That is…

TL;DR more like shouldComponentRerender() never PureComponent a component with children See this link for an always-current, potentially more dev-friendly read. A brief introduction By default, when a component changes and re-renders, all components in its render() are also re-rendered, and their subcomponents are re-rendered, and so on, all the way down. …

What is an “injector component”? An injector component takes props, optionally computes new ones, then injects them into its child via React.cloneElement(). Crucially, it also does not add any new components to the DOM. It only exists in React's virtual DOM. When Are Injector Components Useful? In the prototyping framework, constelation, we use a LOT of injector components to…

When I first learned about spreading props in JSX, I was thrilled! It is just so convenient to pass props with <MyComponent {...this.props} />, and override props defined after the spread, like <MyComponent {...this.props} text='override text prop' />. I knew it made for a great developer experience, but I always…