globalRenderCounter

Readme.md

globalRenderCounter

In different parts of the codebase add:

// file1
countRender('render1');
// file2
countRender('render2')
// file3
countRender('render3')

note: the passed in key could probably be refactored out so it is just countRender(), but maybe not.

At the lowest level component, the one you want to look at add the following:

<RenderCounter/>

Now, you should see the render counter in the top left of the screen and it should always be visible.

Links:

https://stackoverflow.com/a/73678597/5283424
https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render
https://github.com/simbathesailor/use-what-changed

globalRenderCount.tsx

let _obj: any = {};

export const setGlobal = (obj: any) => {
  Object.assign(_obj, obj);
};
export const getGlobalObj = () => {
  return _obj;
};

export const getGlobal = (varName: string) => {
  if (_obj[varName] !== undefined) {
    return _obj[varName];
  } else {
    return null;
  }
};

export const countRender = (key: string) => {
  // example: setGlobal({ render2: getGlobal('render2') !== undefined ? getGlobal('render2') + 1 : 0 });
  setGlobal({ [key]: getGlobal(key) !== undefined ? getGlobal(key) + 1 : 0 });
};

export const RenderCounter = () => {
  return (
    <div
      style={{
        position: 'fixed',
        top: '10px',
        backgroundColor: 'white',
        zIndex: '999999',
        padding: '20px',
        paddingRight: '100px',
      }}
    >
      {Object.keys(getGlobalObj()).map((key) => {
        return (
          <div>
            {key}: {getGlobal(key)}
          </div>
        );
      })}
      {/* <div>RenderCount 1: {getGlobal('render1')}</div>
  <div>RenderCount 2: {getGlobal('render2')}</div>
  <div>RenderCount 3: {getGlobal('render3')}</div> */}
    </div>
  );
};