Denis1205

Суть в том, что useEffect можно использовать по разному, если не передавать зависимости, то useEffect сработает до и будет работать на каждый рендер, даже можно использовать несколько useEffect в разных целях.

useEffect(() => {
  // какой-то код
}); // без указания второго аргумента работает на каждый "чих"

useEffect(() => {
 // с пустым массивом зависимостей сработает аналогично componentDidMount, тут лучше фетчить
}, []);

useEffect(() => {
  console.log(props)
  // с зависимостями аналогично componentDidUpdate
}, [props])

useEffect(() => {
  // можно вернуть функцию, это будет аналогично componentWillUnmount
  return () => {
     // тут можно удалять всякие листнеры и слать события в стор, этот код сработает при размонтировании
  }
}, []);

P.S: удачи в собесах))

useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.

const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])

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

const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках

const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])

Убираете инлайновый fill и красите на здоровье

.socials__link:hover {
  fill: red;
}

А ещё лучше перейти с символьных спрайтов на стеки и не мусорить в разметке, а использовать mask
Сборка стеков, например: https://www.npmjs.com/package/gulp-stacksvg
Также они вставятся и в use и в css в качестве content, bg или mask.
Про маски https://codepen.io/noahblon/post/coloring-svgs-in-...