perf: Use PureComponent to avoid useless re-renders (#7258)

remix-run · Apr 14, 2020 · bfe0d2b · bfe0d2b
1 parent 291bfd0
commit bfe0d2b
Show file tree

Hide file tree

Showing 14 changed files with 15 additions and 15 deletions.
diff --git a/packages/react-router-dom/modules/BrowserRouter.js b/packages/react-router-dom/modules/BrowserRouter.js
@@ -7,7 +7,7 @@ import warning from "tiny-warning";
 /**
  * The public API for a <Router> that uses HTML5 history.
  */
-class BrowserRouter extends React.Component {
+class BrowserRouter extends React.PureComponent {
   history = createHistory(this.props);
 
   render() {

diff --git a/packages/react-router-dom/modules/HashRouter.js b/packages/react-router-dom/modules/HashRouter.js
@@ -7,7 +7,7 @@ import warning from "tiny-warning";
 /**
  * The public API for a <Router> that uses window.location.hash.
  */
-class HashRouter extends React.Component {
+class HashRouter extends React.PureComponent {
   history = createHistory(this.props);
 
   render() {

diff --git a/packages/react-router-native/BackButton.js b/packages/react-router-native/BackButton.js
@@ -3,7 +3,7 @@ import { BackHandler } from "react-native";
 
 import { __RouterContext as RouterContext } from "react-router";
 
-class BackButton extends React.Component {
+class BackButton extends React.PureComponent {
   handleBack = () => {
     if (this.history.index === 0) {
       return false; // home screen

diff --git a/packages/react-router-native/DeepLinking.js b/packages/react-router-native/DeepLinking.js
@@ -5,7 +5,7 @@ import { __RouterContext as RouterContext } from "react-router";
 
 const protocolAndSlashes = /.*?:\/\//g;
 
-class DeepLinking extends React.Component {
+class DeepLinking extends React.PureComponent {
   push(url) {
     const pathname = url.replace(protocolAndSlashes, "");
     this.history.push(pathname);

diff --git a/packages/react-router-native/Link.js b/packages/react-router-native/Link.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import { __RouterContext as RouterContext } from "react-router";
 
-export default class Link extends React.Component {
+export default class Link extends React.PureComponent {
   static defaultProps = {
     component: TouchableHighlight,
     replace: false

diff --git a/packages/react-router-native/experimental/StackRoute.js b/packages/react-router-native/experimental/StackRoute.js
@@ -76,7 +76,7 @@ const PARENT_TRAVEL_DISTANCE = 100;
 const PARENT_FINAL_OPACITY = 0.25;
 const CARD_SHADOW_RADIUS = 10;
 
-class AnimatedStack extends React.Component {
+class AnimatedStack extends React.PureComponent {
   static propTypes = {
     title: PropTypes.any,
     content: PropTypes.any,

diff --git a/packages/react-router-native/experimental/TabRoutes.js b/packages/react-router-native/experimental/TabRoutes.js
@@ -4,7 +4,7 @@ import { View } from "react-native";
 
 import Link from "../Link.js";
 
-export class TabRoutes extends React.Component {
+export class TabRoutes extends React.PureComponent {
   render() {
     const { children } = this.props;
     return (
@@ -36,7 +36,7 @@ export class TabRoutes extends React.Component {
   }
 }
 
-export class TabRoute extends React.Component {
+export class TabRoute extends React.PureComponent {
   render() {
     const { renderContent, path } = this.props;
     return <Route path={path} render={renderContent} />;

diff --git a/packages/react-router-native/index.android.js b/packages/react-router-native/index.android.js
@@ -10,7 +10,7 @@ import {
   Prompt
 } from "react-router-native";
 
-class ReactRouterNative extends React.Component {
+class ReactRouterNative extends React.PureComponent {
   render() {
     return (
       <NativeRouter>

diff --git a/packages/react-router/modules/Lifecycle.js b/packages/react-router/modules/Lifecycle.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-class Lifecycle extends React.Component {
+class Lifecycle extends React.PureComponent {
   componentDidMount() {
     if (this.props.onMount) this.props.onMount.call(this, this);
   }

diff --git a/packages/react-router/modules/MemoryRouter.js b/packages/react-router/modules/MemoryRouter.js
@@ -8,7 +8,7 @@ import Router from "./Router.js";
 /**
  * The public API for a <Router> that stores location in memory.
  */
-class MemoryRouter extends React.Component {
+class MemoryRouter extends React.PureComponent {
   history = createHistory(this.props);
 
   render() {

diff --git a/packages/react-router/modules/Route.js b/packages/react-router/modules/Route.js
@@ -27,7 +27,7 @@ function evalChildrenDev(children, props, path) {
 /**
  * The public API for matching a single path and rendering.
  */
-class Route extends React.Component {
+class Route extends React.PureComponent {
   render() {
     return (
       <RouterContext.Consumer>

diff --git a/packages/react-router/modules/Router.js b/packages/react-router/modules/Router.js
@@ -7,7 +7,7 @@ import RouterContext from "./RouterContext.js";
 /**
  * The public API for putting history on context.
  */
-class Router extends React.Component {
+class Router extends React.PureComponent {
   static computeRootMatch(pathname) {
     return { path: "/", url: "/", params: {}, isExact: pathname === "/" };
   }

diff --git a/packages/react-router/modules/StaticRouter.js b/packages/react-router/modules/StaticRouter.js
@@ -50,7 +50,7 @@ function noop() {}
  * location changes in a context object. Useful mainly in testing and
  * server-rendering scenarios.
  */
-class StaticRouter extends React.Component {
+class StaticRouter extends React.PureComponent {
   navigateTo(location, action) {
     const { basename = "", context = {} } = this.props;
     context.action = action;

diff --git a/packages/react-router/modules/Switch.js b/packages/react-router/modules/Switch.js
@@ -9,7 +9,7 @@ import matchPath from "./matchPath.js";
 /**
  * The public API for rendering the first <Route> that matches.
  */
-class Switch extends React.Component {
+class Switch extends React.PureComponent {
   render() {
     return (
       <RouterContext.Consumer>