2019-05-01+net

React

React Developer Tools, an extension available on both Firefox

and Chrome browsers, is a tool provided by Facebook to help

debug your React apps.

It can also be pretty helpful at identifying where re-renders are

happening in your app, giving you the opportunity to refactor the

code if you think it’s necessary.

To find out where re-renders are occurring in your app, open

the Developer Tools. Along the top of the pane you should see a

number of options, including ‘Elements’, ‘Console’ and other tools

you’ve probably used before. Once you’ve installed the React

Developer Tools you should see a new item labelled ‘React’ near

the far end of this list.

If you click on the cog icon, you’ll see some additional settings,

including ‘Highlight Updates’.

Try interacting with your site when Highlight Updates is ticked.

You might be surprised at how much re-rendering is happening,

slowing down the experience for users and having a negative

impact on your conversions.

Now you know where to start fixing the problem!

USE DEVELOPER TOOLS

TO TEST PERFORMANCE

IN-DEPTH

Make using the React Developer Tools a part of your workflow – it will enable you

to highlight any areas of your site that need recoding to get up to speed

HOW TO USE CONTEXT
I have set up a demo of Context in use on
CodeSandbox (https://codesandbox.io/s/0pl62xq030).
Let’s walk through this code.
Context consists of two components:

O a Provider
O a Consumer

The easiest way of explaining this relationship is
that the Consumer is what will be using features
‘provided’ by our Context.

INITIAL SETUP
Create a new module called Context.js adding the
following code:

import React from “react”;
export const MyContext = React.createContext();
export const MyContextConsumer = MyContext.Consumer;
export default class myContextProvider extends React.
Component {
state = {
aRangeofOptions: [“one”, “two”, “three”],

updatesOnClick: null
};
render() {
const { children } = this.props;
return (
<MyContext.Provider
value={{
state: this.state,
onItemSelect: item => {
this.setState({
updatesOnClick: item
});
}
}}

{children}

);

“A p p s c a n p e r f o r m f a s t e r

because changes made to

properties no longer

require a huge amount of

re-rendering on a

parent component”