Redux action in useEffect Ошибка TypeScript?

Question

При загрузке страницы мне нужно выполнить логи c на основе URL, а затем отправить действие Redux. Этот код работает нормально, но выдает ошибку TypeScript:

React.useEffect(() => {

const { search } = window.location;
const removeFirstQuestionMark = search.slice(1);

if (!removeFirstQuestionMark) {
  return null;
}

// more logic 

reduxAction({
  foo: 'bar'
});
  return null;
}, []);

ошибка TS2345: Аргумент типа '() => null | undefined 'не может быть назначен параметру типа' EffectCallback '. Тип 'нуль | undefined «нельзя назначить типу» void | (() => void | undefined) '. Тип 'null' нельзя назначить типу 'void | (() => void | undefined) '.

14 React.useEffect (() => {

Answer 1

Внутри useEffect мы обычно возвращаем функцию, которая выполняет некоторую очистку, когда компонент отключается. Если вы не хотите делать что-то подобное, не возвращайте ничего.

React.useEffect(() => {

const { search } = window.location;
const removeFirstQuestionMark = search.slice(1);

if (!removeFirstQuestionMark) {
  return null;
}

// more logic 

reduxAction({
  foo: 'bar'
});
//  return null;
}, []);

Answer 2

useEffect Возвращаемое значение должно быть обратным вызовом, который позволяет делать вещи на компоненте, монтировавшем

React.useEffect(() => {
  const { search } = window.location;
  const removeFirstQuestionMark = search.slice(1);

  if (!removeFirstQuestionMark) {
    return null; // do not return but you can use if else to avoid next code execution
  }

  // more logic

  reduxAction({
    foo: "bar"
  });
  return () => {
    // Things to do on component will unmount
  };
}, []);