.svg-icon-class {
  fill: currentColor;
}

Вопрос такой, зачем хуки когда есть MobX?

const Foo = ({ handler }) => {
  const ref = useOnClickOutside(handler);

  return <div ref={ref}>Just click outside</div>;
};

это слегка лучше setState,

а хуки это так, hello world для чистого реакта без всего остального

но как ни крути с ними кода больше,

const Foo = () => {
  const { isActive, setActive } = useState(false);

  const toggle = () => {
    setActive(s => !s);
  };

  return <button onClick={toggle}>Toggle Active</button>;
};

const Foo = () => {
  const [state, handler] = useToggle();

  return <button onClick={handler}>Toggle Active</button>;
};

то снежный код наростает и читаемость снижается сильнее чем просто чистая манипуляция с переменными(MobX подход)

const Example: FC = () => {
  const windowWidth = useWindowWidth();

  return (
    ...
  );
}

@withWindowWidth
class Example extends React.Compоnent<WithWindowWidthProp> {
  render() {
    const { windowWidth } = this.props;

    return (
      ...
    );
  };
}

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  
  return width;
}

import React from 'react';
import { useWindowWidth } from './utils/customHooks';

const Example = () => {
  const width = useWindowWidth();
  
  return (
    ...
  );
};

Храните данные только в redux(все-все, даже «внутренние»), если он подключен к вашему react-проекту в качестве основного хранилища, не используйте хранилищ которые будут конкурировать с ним.

Автор статьи, перевод которой мы публикуем, считает, что, к несчастью, в большинстве из существующих руководств по React не уделяется должного внимания ценным практическим приёмам разработки.

const getButtonStyles = ({ type, theme }) => {
  switch (type) {
    case 'primary':
      return css`
        // primary styles
      `;
     case 'brand':
      return css`
        
      `;
     default:
       return css`
          // default styles
       `;
  }
}

const Button = styled.button`
  // common styles
  ${getButtonStyles}
  ${media.mobile`
    // mobile styles
  `}
`;