quick poor mans, way for react to tell how many of these components exist by rendering one time.

poor-mans-render-one-time.md

Everyone seems to know this, but here is a good refresher in case I ever forget.

  useEffect(() => { console.log('I am a component, 1 render') }, [true]);

Pointed empty array works you dont need true, My paranoid self thought that I read in the documentation that empty array would track all. This was not the case.

  useEffect(() => { console.log('I am a component, 1 render') }, []);

const fn = () => { console.log('component rendered') };
const these = 'test';
const states = 'test';
useEffect(fn); // all state
useEffect(fn, []); // no state
useEffect(fn, [these, states]);

https://twitter.com/ryanflorence/status/1125041041063665666

import { useEffect } from 'react';
// ...
  const  { var1, var2, var3 } = props
  
  useEffect(() => {
    console.log('tell me what loaded first time', { var1, var2, var3 })
  }, [])
  useEffect(() => {
    console.log('tell me what changed plz ', { var1, var2, var3 })
  })
  
  /*
  useEffect(() => { // cleanup yo use effects.
    effect
    return () =>  cleanup
  }, [input])
*/

https://gist.github.com/clintonlunn/410e6db90866c5e2f9cff70a32e79afd

@harmolipi