title: Why does the following React code cause css highlights to skip when the css transaction is not over
body: <p>The following React code should highlight the component when the children have changed. This highlighting does not always happen when the change happens before the css transaction of the previous change has finished. What can I do about it? Does it have to do with React? Or is it how css works?</p>
  <pre><code>import React, { useEffect, useLayoutEffect, useRef, useState } from &quot;react&quot;;
  import { Box } from &quot;@mui/material&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  
  const useStyles = makeStyles({
    highlight: {
      backgroundColor: &quot;yellow&quot;,
    },
    transparent: {
      transition: &quot;background-color 5s linear&quot;,
    },
  });
  
  const ChangeHighlight = ({ children }: any) =&gt; {
    const classes = useStyles();
    const [className, setClassName] = useState(classes.transparent);
    useLayoutEffect(() =&gt; {
      setClassName(classes.highlight);
    }, [children]);
    useEffect(() =&gt; {
      if (className === classes.highlight) {
        setClassName(classes.transparent);
      }
    });
    return &lt;Box className={className}&gt;{children}&lt;/Box&gt;;
  };
  
  export default ChangeHighlight;
  </code></pre>