How to stop the infinite loop inside this React useEffect?

Question

I want React to render key presses from a non-React context, more specifically the string array keys:

import * as React from "react";
import { render } from "react-dom";

let keys: string[] = [];

function handleKeypress(event: any) {
  keys.push(event.key);
  console.log(keys);

  // there will be more code here unrelated to React.
}

document.removeEventListener("keypress", handleKeypress);
document.addEventListener("keypress", handleKeypress);

function App() {
  const [keysState, setKeysState] = React.useState<string[]>([]);

  React.useEffect(() => {
    function updateKeysState() {
      setKeysState([...keys]);
    }

    // if you uncomment this, the code inside useEffect will run forever
    // updateKeysState()

    console.log("Hello world");
  }, [keysState]);

  return (
    <div>
      {keys.map((key: string, id) => (
        <li key={id}>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

I almost accomplished that ... the problem is, the code inside React.useEffect runs in an infinite loop.

I thought passing [keysState] as a second argument to React.useEffect would stop the infinite loop. But it didn't.

Why is this and how to fix it?

Live code: https://codesandbox.io/s/changing-props-on-react-root-component-forked-eu16oj?file=/src/index.tsx

Does this answer your question? [Infinite loop in useEffect](https://stackoverflow.com/questions/53070970/infinite-loop-in-useeffect) — Layhout, Nov 29 '22 at 04:44
@Layhout I think it's a little more nuanced than just that post — Phil, Nov 29 '22 at 04:45
Basically just https://stackoverflow.com/q/74589770/3001761 again. The effect is called every time the keys are updated, which updates the keys, which calls the effect, which ... And `updateKeysState` isn't doing anything at all for you, defining a function doesn't defer execution if you immediately call it. — jonrsharpe, Nov 29 '22 at 07:53

CertainPerformance · Accepted Answer · 2022-11-29T04:46:59.120

3

The best way would be to integrate the non-React code into the App, so that setting state as a result of a keypress is natural and trivial.

function App() {
    const [keys, setKeys] = React.useState<string[]>([]);
    useEffect(() => {
        function handleKeypress(event: KeyboardEvent) {
            setKeys([...keys, event.key]);
            // There will be more code here that's unrelated to React.
        }
        document.addEventListener("keypress", handleKeypress);
        return () => {
            document.removeEventListener("keypress", handleKeypress);
        };
    }, []);

Then you can drop your current React.useEffect (and its infinite loop) entirely.

If that's not an option, you'd have to trigger the React state setter from outside of React - any way you look at it, that'll be pretty ugly. I suppose you could assign it to an outside variable:

let setKeysOuter;

function handleKeypress(event: KeyboardEvent) {
  setKeysOuter?.(keys => [...keys, event.key]);
  // There will be more code here that's unrelated to React.
}

function App() {
  const [keys, setKeys] = React.useState<string[]>([]);
  setKeysOuter = setKeys;

edited Nov 29 '22 at 04:46

answered Nov 29 '22 at 04:44

CertainPerformance

356,069
52
309
320

I want to keep the non-React code outside of react. If that's the case, how can I stop the infinite loop? – alexchenco Nov 29 '22 at 04:46
1

@alexchenco what do you mean by _"non-React code"_? It's all just JavaScript and JSX that becomes JavaScript and HTML and since you're wanting to control component state from DOM events, they should be integrated – Phil Nov 29 '22 at 04:51
The code inside `document.addEventListener('keypress')` is quite big and the code isn't related to React but the DOM: https://codesandbox.io/s/changing-props-on-react-root-component-forked-ny0lrr So you suggest I put all that code inside `useEffect`? – alexchenco Nov 29 '22 at 04:53
1

@alexchenco If you wanted, you could declare the bulk of that code outside, and then inside React, only call the state setter and call the outside (non-React) function. – CertainPerformance Nov 29 '22 at 04:55
1

You could also simply register multiple event listeners; React ones to deal with component state and _outside_ ones to deal with whatever – Phil Nov 29 '22 at 04:56
@Phil You mean have `document.addEventListener('keypress')` twice in the code (inside and outside of React)? I was thinking about that. But wouldn't that be code repetition? – alexchenco Nov 29 '22 at 04:57
2

Could be worth it - super DRY code is not always the most maintainable option. – CertainPerformance Nov 29 '22 at 04:58

How to stop the infinite loop inside this React useEffect?

1 Answers1