Wish for improvement. Element changes monitoring.

[Fi1osof]

In settings we can set "Hightlight Updates" and we see them, but did not know why component updated. There are usually three reasons: changed props, changed state or changed context.
For me i create this component:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class PrismaCmsPerformanceTesterInner extends Component {

  static propTypes = {
    prefix: PropTypes.string.isRequired,
  }

  componentDidUpdate(prevProps, prevState) {

    const keys = Object.keys(this.props);

    keys.map(key => {

      const value = this.props[key];

      const prevValue = prevProps[key];

      if (value !== undefined && prevValue !== undefined && value !== prevValue) {

        const {
          prefix,
        } = this.props;

        console.log(`${prefix} changed ${key.split("__").join("/")}`, value, prevValue);

      }

    });

    super.componentDidUpdate && super.componentDidUpdate(prevProps, prevState);

  }

  render() {
    return null;
  }
}

class PrismaCmsPerformanceTester extends Component {

  static propTypes = {
    prefix: PropTypes.string.isRequired,
  }

  static defaultProps = {
    prefix: "PrismaCmsPerformanceTester",
  }

  render() {

    const {
      prefix,
      children,
    } = this.props;

    let output = [
      children,
    ];

    Object.keys(this.props).map(name => {

      const value = this.props[name];

      const key = name;

      output.push(<PrismaCmsPerformanceTesterInner
        key={key}
        prefix={`${prefix}__outer`}
        {...{
          [key]: value,
        }}
      />);

      /**
       * Also check inner props 1st level
       */
      if (value && typeof value === "object" && !(value instanceof Array)) {

        Object.keys(value).map(innerName => {

          const innerValue = value[innerName];

          const innerKey = `${key}__${innerName}`;

          output.push(<PrismaCmsPerformanceTesterInner
            key={innerKey}
            prefix={`${prefix}__inner`}
            {...{
              [innerKey]: innerValue,
            }}
          />);

        });

      }

    })

    return output;
  }
}

export default PrismaCmsPerformanceTester;

Source component

In my App i use:

import React, { Component } from 'react';
import PrismaCmsPerformanceTester from "@prisma-cms/performance";

export default class Test extends Component {

  render(){

    return <PrismaCmsPerformanceTester 
      props={this.props}
      state={this.state}
      context={this.context}
    />
  }

}

And see updating reason in browser console, like this:

filters_performance__outer changed props {mode: "main", parent: Grid, props: {…}, components: Array(0), object: {…}, …} {mode: "main", parent: Grid, props: {…}, components: Array(0), object: {…}, …}
App.js:97 filters_performance__outer changed context {client: ApolloClient, errors: Array(0), wsLink: WebSocketLink, reconnectWs: ƒ, token: undefined, …} {client: ApolloClient, errors: Array(0), wsLink: WebSocketLink, reconnectWs: ƒ, token: undefined, …}
App.js:97 filters_performance__inner changed context/router {history: {…}, route: {…}} {history: {…}, route: {…}}
App.js:97 filters_performance__inner changed context/query {templatesConnection: "↵      query templatesConnection (↵        $where:…ption↵      url↵      domain↵    }↵    ↵    ↵    ", templates: "↵      query templates (↵        $where: TemplateW…ption↵      url↵      domain↵    }↵    ↵    ↵    ", template: "↵      query template (↵        $where: TemplateWh…ption↵      url↵      domain↵    }↵    ↵    ↵    ", createTemplateProcessor: "↵      mutation createTemplateProcessor(↵        $…ption↵      url↵      domain↵    }↵    ↵    ↵    ", updateTemplateProcessor: "↵      mutation updateTemplateProcessor(↵        $…ption↵      url↵      domain↵    }↵    ↵    ↵    ", …} {templatesConnection: "↵      query templatesConnection (↵        $where:…ption↵      url↵      domain↵    }↵    ↵    ↵    ", templates: "↵      query templates (↵        $where: TemplateW…ption↵      url↵      domain↵    }↵    ↵    ↵    ", template: "↵      query template (↵        $where: TemplateWh…ption↵      url↵      domain↵    }↵    ↵    ↵    ", createTemplateProcessor: "↵      mutation createTemplateProcessor(↵        $…ption↵      url↵      domain↵    }↵    ↵    ↵    ", updateTemplateProcessor: "↵      mutation updateTemplateProcessor(↵        $…ption↵      url↵      domain↵    }↵    ↵    ↵    ", …}

Can you add some like this in devtools? Manualy set watching components and got updating logs.

Thanks!

[Fi1osof]

In redux devtools exists someone like i mean.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools

[Fi1osof]

@bvaughn new devTools much cooler! :)

[bvaughn]

Thanks :)