Log Changed Properties in a React Component

Last update: Mar 26, 2022

Log Changed Properties in a React Component

This HOC (High Order Component) will wrap an existing class or function component and track properties that changed.

This is useful if you're building a memoized component but it keeps rendering and you want to know the property that is causing that.

It's meant to be used during development, production builds should remove it.

Example

import withPropsChangeLogger from '@profusion/with-props-change-logger';

function MyComponent(props: { a: number[] }) {
  return (
    <div>{JSON.stringify(a)}</div>
  );
}

const LoggedComponent = withPropsChangeLogger(MyComponent);

function OtherComponent() {
  return (
    <LoggedComponent a={[1, 2, 3, 4, 5, 6, 7, 8]}>
  );
}

When changed (say from [1234] to [1,2,3,4,5,6,7,8]), produces:

PROP CHANGED: SimpleComponent a from:
	[1234]
to:
	[1,2,3,4,5,6,7,8]
PROP RE-RENDERED DUE PROPS: SimpleComponent

NOTE: objects (including arrays) and functions are compared just like React does, using a shallow comparison! It doesn't matter if the properties, array elements or the function body are the same, if the instance is different, they will be logged. Be sure to keep it stable (ie: using the old instances) with useMemo(), useRef() or useCallback().

Verbosity

If you find the amount of information too verbose, you may want to provide verbose: false and it will show only the typeof result, such as:

const LoggedComponent = withPropsChangeLogger(MyComponent, {
  verbose: false,
});

Produces:

PROP CHANGED: SimpleComponent a from: object to: object
PROP RE-RENDERED DUE PROPS: SimpleComponent

GitHub

https://github.com/profusion/with-props-change-logger
You might also like...

Rheostat is a www, mobile, and accessible slider component built with React

Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

May 7, 2022

A simple React component that is resizable with a handle.

React-Resizable View the Demo A simple widget that can be resized via one or more handles. You can either use the Resizable element directly, or use

May 7, 2022

📕React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

📕React component library designed on the

📕 React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

May 10, 2022

React Component for Swapping on the Serum DEX

@project-serum/swap-ui A reusable React component for swapping on the Serum DEX. The Solana program can be found here. Usage Install First install the

Apr 18, 2022

A React Component library for buliding modern applications easily & quickly.

A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

May 6, 2022

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

May 6, 2022

A React component generation for app prototyping

A React component generation for app prototyping

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

Dec 4, 2021

InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Nov 8, 2021

Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

Mar 22, 2022
Comments
  • 1. build(deps): bump ejs from 3.1.6 to 3.1.8 in /example

    Bumps ejs from 3.1.6 to 3.1.8.

    Release notes

    Sourced from ejs's releases.

    v3.1.8

    Version 3.1.8

    v3.1.7

    Version 3.1.7

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-05-17 22:59
react-health-card 🏥💳 An awesome react health card component.
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

Nov 8, 2021
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Dec 22, 2021
React-ens-avatar - React component for ENS avatar image display with emoji as fallback

react-ens-avatar React component for ENS avatar image display with emoji as fall

May 13, 2022
☎️ react-telephone: Tiniest react input phone component (auto formating included)
☎️ react-telephone: Tiniest react input phone component (auto formating included)

☎️ react-telephone: Tiniest react input phone component (auto formating included)

Mar 31, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

May 13, 2022
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

May 9, 2022
A React Component library implementing the Base design language
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

May 13, 2022
The Most Complete React UI Component Library
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

May 9, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

May 6, 2022
React particles animation background component
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

May 9, 2022