vzaidman

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackExtraHooks: [[ReactRedux, "useSelector"]]
  });
}

vzaidman

const BrokenBigPureComponent = React.memo(() => {
  const data = useSelector(state => ({ text: state.text }));
  return (
    <p>{data.text}</p>
  );
});

vzaidman

function App() {
  console.log("App - start render");
  React.useEffect(() => console.log("App - rendered"));
  
  return React.createElement(
    Parent,
    null,
    React.createElement(Child, null),
    React.createElement(Child, null),
    React.createElement(Child, null)

vzaidman

function App() {
  console.log("App - start render");
  React.useEffect(() => console.log("App - rendered"));
  return (
    <Parent>
      <Child />
      <Child />
      <Child />
    </Parent>
  );

vzaidman

html.colors {
  --red: #d47c7c;
  --purple: #9e42f5;
}

html.concepts {
  --main-brand-color: var(--red);
  --secondary-brand-color: var(--purple);
  --main-shadow-color: var(--red);
}

vzaidman

html.colors {
  ...
  --red: #d47c7c;
  --purple: #9e42f5;
}

html.entities {
  /* ... 50 more enteties */
  --action-button-background-color: var(--red);
  --action-button-shadow-color: var(--red);

vzaidman

<section id="about-us" class="dark-mode-colors dark-mode-entities">
  ...
</section>

vzaidman

html.dark-mode-colors {
  ...
  --gray: #666;
}

html.dark-mode-entities {
  ...
  --action-button-background-color: var(--gray)
}

vzaidman

html.colors {
  ...
  --red: #d47c7c;
}

html.enteties {
  ...
  --action-button-background-color: var(--red);
}

vzaidman

html.colors {
  ...
  --red: #d47c7c;
}