3 Ways to Fine-tune Presentational Components

Three ways to fine-tune your React presentational components  #reactjs #javascript

  • Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
  • Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
  • Instead, extract a new component and pull it up: – – Let the container decide explicitly when and where show presentational components.
  • As you keep pulling presentational components up, they start looking like enhanced native elements, so you’d like to be able to pass all props you would pass to a native element, like or .
  • Inside the component, extract the props you’ve defined yourself and pass the rest to the element that you’re wrapping: – – Here, we’re separating the prop from the rest, and passing the remaining props to the element.

Saturday, Feb 17 2018




Continue reading “3 Ways to Fine-tune Presentational Components”

Context in ReactJS Applications

  • The short answer is that you should very rarely, if ever use context in your own React components.
  • Context acts like a portal in your application in which components can make data available to other components further down the tree without being passed through explictly as props.
  • If an interim component does this, a child component won’t update, even if a context value changes:

    In the above example, if changes, will not render, because its parent returned from .

  • Libraries like React Router use context to allow the components that they provide application developers to communicate.
  • It exposes the object on the context, and other than that it simply renders the children that it’s given:

    expects to find , and it registers itself when it’s rendered:

    Finally, we can use the and components in our own app:

    The beauty of context in this situation is that as library authors we can provide components that can work in any situation, regardless of where they are rendered.

There is a lot of confusion amongst React developers on what context is, and why it exists. It’s also a feature that’s been hidden in the React documentation in the past and, although it is now documented on the React site I thought a post on its usage and when to use it would be of use.
Continue reading “Context in ReactJS Applications”

Optimizing Compiler: Tagging ReactElements · Issue #3227 · facebook/react · GitHub

Optimizing compiler: Tagging ReactElements  #ReactJS

  • Then we could use the hidden class to generate an optimized diffing algorithm for these instead of iterating over the properties.
  • // Constant properties are annotated as 1, other properties are excluded and inferred by props.
  • The hidden class would reference all the static props.
  • @trueadm I think @sebmarkbage mentioned that originally with “Bonus points if we can determine which properties are constant.”
  • We would only need to do this for type: since we only diff native components.

Read the full article, click here.

@ReactiveConf: “Optimizing compiler: Tagging ReactElements #ReactJS”

react – A declarative, efficient, and flexible JavaScript library for building user interfaces.

Optimizing Compiler: Tagging ReactElements · Issue #3227 · facebook/react · GitHub