Skip to content

Instantly share code, notes, and snippets.

@timhwang21

timhwang21/renderDoctor.js

Last active February 8, 2019 23:33
Show Gist options
  • Save timhwang21/d16faaa931ad2aae61d7f2e8933d3cc2 to your computer and use it in GitHub Desktop.
Save timhwang21/d16faaa931ad2aae61d7f2e8933d3cc2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. timhwang21 revised this gist Oct 3, 2016. 1 changed file with 23 additions and 23 deletions.
    46 changes: 23 additions & 23 deletions renderDoctor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,31 +16,31 @@ import { isEqual } from "underscore";
    * @return {node} Component decorated with logger
    */
    const renderDoctor = ComposedComponent => class extends React.Component {
    componentWillReceiveProps(nextProps) {
    let propsChange = Object.keys(nextProps).reduce((changedProps, key) => {
    if (nextProps[key] !== this.props[key]) {
    changedProps = {
    ...changedProps,
    [key]: {
    old: this.props[key],
    new: nextProps[key],
    deepEqual: isEqual(this.props[key], nextProps[key])
    }
    };
    }
    return changedProps;
    }, {});
    componentWillReceiveProps(nextProps) {
    let propsChange = Object.keys(nextProps).reduce((changedProps, key) => {
    if (nextProps[key] !== this.props[key]) {
    changedProps = {
    ...changedProps,
    [key]: {
    old: this.props[key],
    new: nextProps[key],
    deepEqual: isEqual(this.props[key], nextProps[key])
    }
    };
    }
    return changedProps;
    }, {});

    if (Object.keys(propsChange).length) {
    console.groupCollapsed("%cRender Doctor%c", "color:#AA0000;", "color:#000;");
    console.table(propsChange, ['deepEqual']);
    console.groupEnd("%cRender Doctor%c", "color:#AA0000;", "color:#000;");
    }
    }
    if (Object.keys(propsChange).length) {
    console.groupCollapsed("%cRender Doctor%c", "color:#AA0000;", "color:#000;");
    console.table(propsChange, ['deepEqual']);
    console.groupEnd("%cRender Doctor%c", "color:#AA0000;", "color:#000;");
    }
    }

    render() {
    return <ComposedComponent {...this.props} />;
    }
    render() {
    return <ComposedComponent {...this.props} />;
    }
    };

    export default renderDoctor;
  2. timhwang21 revised this gist Oct 3, 2016. No changes.
  3. timhwang21 revised this gist Oct 3, 2016. No changes.
  4. timhwang21 created this gist Oct 3, 2016.
    46 changes: 46 additions & 0 deletions renderDoctor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    import React from "react";
    import { isEqual } from "underscore";

    /**
    * HOC for diagnosing unnecessary renders and identifying faulty selectors
    *
    * Adds a logger function to a component that lists all changed props
    * Also checks if changed props are deeply equal
    *
    * Usage: Decorate the component you are investigating with renderDoctor:
    *
    * @renderDoctor
    * export default class FlightGridControl extends _Base { ...component code };
    *
    * @param {node} ComposedComponent Component to decorate
    * @return {node} Component decorated with logger
    */
    const renderDoctor = ComposedComponent => class extends React.Component {
    componentWillReceiveProps(nextProps) {
    let propsChange = Object.keys(nextProps).reduce((changedProps, key) => {
    if (nextProps[key] !== this.props[key]) {
    changedProps = {
    ...changedProps,
    [key]: {
    old: this.props[key],
    new: nextProps[key],
    deepEqual: isEqual(this.props[key], nextProps[key])
    }
    };
    }
    return changedProps;
    }, {});

    if (Object.keys(propsChange).length) {
    console.groupCollapsed("%cRender Doctor%c", "color:#AA0000;", "color:#000;");
    console.table(propsChange, ['deepEqual']);
    console.groupEnd("%cRender Doctor%c", "color:#AA0000;", "color:#000;");
    }
    }

    render() {
    return <ComposedComponent {...this.props} />;
    }
    };

    export default renderDoctor;