Во втором подходе useEffect привязывается только один раз и, следовательно, userText никогда не обновляется. Один из подходов — поддерживать локальную переменную, которая обновляется вместе с объектом userText при каждом нажатии клавиши.

  const [userText, setUserText] = useState('');
  let local_text = userText
  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      local_text = `${userText}${key}`;
      setUserText(local_text);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Лично мне не нравится решение, чувствуется anti-react, и я думаю, что первый метод достаточно хорош и предназначен для использования таким образом.

новый ответ:

useEffect(() => {
  function handlekeydownEvent(event) {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }

  document.addEventListener('keyup', handlekeydownEvent)
  return () => {
    document.removeEventListener('keyup', handlekeydownEvent)
  }
}, [])

при использовании setUserText передайте функцию в качестве аргумента вместо объекта, prevUserText всегда будет самым новым состоянием.

старый ответ:

попробуйте это, он работает так же, как ваш исходный код:

useEffect(() => {
  function handlekeydownEvent(event) {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  }

  document.addEventListener('keyup', handlekeydownEvent)
  return () => {
    document.removeEventListener('keyup', handlekeydownEvent)
  }
}, [userText])

потому что в вашем методе useEffect() это зависит от переменной userText, но вы не помещаете ее во второй аргумент, иначе userText всегда будет привязан к начальному значению '' с аргументом [].

вам не нужно делать это, просто хочу, чтобы вы знали, почему ваше второе решение не работает.

Вам понадобится способ отслеживать предыдущее состояние. useState помогает отслеживать только текущее состояние. Из документы есть способ получить доступ к старому состоянию, используя другой хук.

const prevRef = useRef();
useEffect(() => {
  prevRef.current = userText;
});

Я обновил ваш пример, чтобы использовать это. И это работает.

const { useState, useEffect, useRef } = React;

const App = () => {
  const [userText, setUserText] = useState("");
  const prevRef = useRef();
  useEffect(() => {
    prevRef.current = userText;
  });

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${prevRef.current}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id = "root"></div>

Для вашего варианта использования useEffect нужен массив зависимостей для отслеживания изменений, и на основе зависимости он может определить, следует ли повторно отображать или нет. Всегда рекомендуется передавать массив зависимостей в useEffect. Пожалуйста, посмотрите код ниже:

Я представил useCallback крючок.

const { useCallback, useState, useEffect } = React;

  const [userText, setUserText] = useState("");

  const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }, []);

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  return (
    <div>
      <blockquote>{userText}</blockquote>
    </div>
  );

у вас нет доступа к измененному состоянию us eText. вы можете сравнить его с prevState. сохранить состояние в переменной, например: состояние следующим образом:

const App = () => {
  const [userText, setUserText] = useState('');

  useEffect(() => {
    let state = ''

    const handleUserKeyPress = event => {
      const { key, keyCode } = event;
      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        state += `${key}`
        setUserText(state);
      }   
    };  
    window.addEventListener('keydown', handleUserKeyPress);
    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };  
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );  
};

Лучший способ справиться с такими сценариями — посмотреть, что вы делаете в обработчике событий.

Если вы просто устанавливаете state, используя предыдущий state, лучше всего использовать шаблон обратного вызова и регистрировать прослушиватели событий только на монтировании исходный.

Если вы не используете шаблон обратного вызова, ссылка прослушивателя вместе с его лексической областью действия используется прослушивателем событий, но создается новая функция с обновленным закрытием при каждом рендеринге; следовательно, в обработчике вы не сможете получить доступ к обновленному состоянию

const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
        window.removeEventListener("keydown", handleUserKeyPress);
    };
}, [handleUserKeyPress]);

  return (
      <div>
          <h1>Feel free to type!</h1>
          <blockquote>{userText}</blockquote>
      </div>
  );

Проблема

[...] on each and every re-render, events will keep registering and deregistering every time and I simply don't think it is the right way to go about it.

Ты прав. Нет смысла перезапускать обработку событий внутри useEffect на рендере каждый.

[...] empty array as the second argument, letting the component to only run the effect once [...] it's weird that on every key I type, instead of appending, it's overwritten instead.

Это проблема с устаревшие значения закрытия.

Причина: Используемые функции внутри useEffect должны быть часть зависимостей. Вы ничего не устанавливаете в качестве зависимости ([]), но все равно вызываете handleUserKeyPress, который сам считывает состояние userText.

Решения

Есть несколько альтернатив в зависимости от вашего варианта использования.

1. Функция обновления состояния

setUserText(prev => `${prev}${key}`);

✔ наименее инвазивный подход
✖ доступ только к собственному предыдущему состоянию, а не к другим состояниям

const App = () => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(prev => `${prev}${key}`); // use updater function here
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []); // still no dependencies

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

2. useReducer - "мошеннический режим"

Мы можем переключиться на useReducer и получить доступ к текущему состоянию/реквизиту — с API, аналогичным useState.

Вариант 2а: логика внутри функции редуктора

const [userText, handleUserKeyPress] = useReducer((state, event) => {
    const { key, keyCode } = event;
    // isUpperCase is always the most recent state (no stale closure value)
    return `${state}${isUpperCase ? key.toUpperCase() : key}`;  
}, "");

const App = () => {
  const [isUpperCase, setUpperCase] = useState(false);
  const [userText, handleUserKeyPress] = useReducer((state, event) => {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      // isUpperCase is always the most recent state (no stale closure)
      return `${state}${isUpperCase ? key.toUpperCase() : key}`;
    }
  }, "");

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
      <button style = {{ width: "150px" }} onClick = {() => setUpperCase(b => !b)}>
        {isUpperCase ? "Disable" : "Enable"} Upper Case
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Вариант 2б: логика вне функции редуктора - аналогично useState функции обновления

const [userText, setUserText] = useReducer((state, action) =>
      typeof action === "function" ? action(state, isUpperCase) : action, "");
// ...
setUserText((prevState, isUpper) => `${prevState}${isUpper ? key.toUpperCase() : key}`);

const App = () => {
  const [isUpperCase, setUpperCase] = useState(false);
  const [userText, setUserText] = useReducer(
    (state, action) =>
      typeof action === "function" ? action(state, isUpperCase) : action,
    ""
  );

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;
      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(
          (prevState, isUpper) =>
            `${prevState}${isUpper ? key.toUpperCase() : key}`
        );
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
      <button style = {{ width: "150px" }} onClick = {() => setUpperCase(b => !b)}>
        {isUpperCase ? "Disable" : "Enable"} Upper Case
      </button>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

✔ нет необходимости управлять зависимостями
✔ доступ к нескольким состояниям и реквизиту
✔ тот же API, что и у useState
✔ расширяется до более сложных случаев/редукторов
✖ немного меньшая производительность из-за встроенного редуктора (своего рода пренебрежительный)
✖ немного увеличена сложность редуктора

3. useRef / сохранить обратный вызов в изменяемой ссылке

const cbRef = useRef(handleUserKeyPress);
useEffect(() => { cbRef.current = handleUserKeyPress; }); // update after each render
useEffect(() => {
    const cb = e => cbRef.current(e); // then use most recent cb value
    window.addEventListener("keydown", cb);
    return () => { window.removeEventListener("keydown", cb) };
}, []);

const App = () => {
  const [userText, setUserText] = useState("");

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  const cbRef = useRef(handleUserKeyPress);

  useEffect(() => {
    cbRef.current = handleUserKeyPress;
  });

  useEffect(() => {
    const cb = e => cbRef.current(e);
    window.addEventListener("keydown", cb);

    return () => {
      window.removeEventListener("keydown", cb);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>

✔ для обратных вызовов/обработчиков событий, не используемых для повторного рендеринга потока данных
✔ нет необходимости управлять зависимостями
✖ рекомендуется только как последний вариант в документации React
✖ более императивный подход

Взгляните на эти ссылки для получения дополнительной информации: 123

Неподходящие решения

useCallback

Хотя его можно применять по-разному, useCallback не подходит для этого конкретного случая вопроса.

Причина: из-за добавленных зависимостей — userText здесь — прослушиватель событий будет перезапущен при нажатии клавиши каждый, в лучшем случае не будет работать или, что еще хуже, вызовет несоответствия.

const App = () => {
  const [userText, setUserText] = useState("");

  const handleUserKeyPress = useCallback(
    event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    },
    [userText]
  );

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]); // we rely directly on handler, indirectly on userText

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>

Для полноты картины, вот несколько ключевых моментов по useCallback в целом:

✔ универсальное практичное решение
✔ минимально инвазивный
✖ ручное управление зависимостями
✖ useCallback делает определение функции более подробным/загроможденным

Объявить функцию-обработчик внутри useEffect

Объявление события функция-обработчик прямо внутри useEffect имеет более или менее те же проблемы, что и useCallback, последнее просто вызывает немного большую косвенность зависимостей.

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

На самом деле, если вы переместите handleUserKeyPress внутрь useEffect, исчерпывающее правило отложений ESLint сообщит вам, какие именно канонические зависимости отсутствуют (userText), если не указано иное.

const App =() => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [userText]); // ESLint will yell here, if `userText` is missing

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Принятый ответ работает, но если вы регистрируете событие BackHandler, убедитесь, что return true в вашей функции handleBackPress, например:

const handleBackPress= useCallback(() => {
   // do some action and return true or if you do not
   // want the user to go back, return false instead
   return true;
 }, []);

 useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleBackPress);
    return () =>
       BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
  }, [handleBackPress]);