React Native Performance Profiling – Adam Stanford – Medium

  • React Native Performance ProfilingOver the past six months at WeDo, we have been working on improving the performance our React Native app.
  • */)Tracking Unnecessary RendersThis might easily be the biggest issue we faced for most of our react native performance issues.
  • You can then either log this, display it in your view, or like we did and use React Native Debugger and inspect our components directly.connect(stateToProps, dispatchToProps, null, {renderCountProp: will give you insight into how many times your view is rendering.
  • In our case we use Reselect as much as we can, so for us this wasn’t an issue as new objects are never returned unless the data within them has changed.Redux Level PerformanceMost of our performance issues were not on the Redux layer of our app.
  • Recently tracking components and views performance within a shared spreadsheet helps us track performance for better or worse.

Over the past six months at WeDo, we have been working on improving the performance our React Native app. With any performance issues, profiling is the first step. In this article I will cover what…
Continue reading “React Native Performance Profiling – Adam Stanford – Medium”

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”