problems in useEffect hook - reactjs

Question

Let's say I have a state called count.
const [count, setCount] = useState();
Now let's say I would like to increase count with 1 every time some key in the keyboard is being pressed.
So I can use useEffect hook and add an event listener to it.
useEffect(() => {
document.addEventListener("keydown", increaseCount);
}, []);
The function increaseCount, increasing count with 1
const increaseCount = () => {
setCount(prevCount => prevCount + 1);
};
Well everything is working great. BUT, if I want to get the current value of count inside increaseCount, I can't do this! The event listener is only called once when the component is mounting (because the useEffect has an empty dependency array).
And if I add count to the dependency array, I have a new problem - I'm creating a kind of loop, because useEffect will call increaseCount, that will call setCount(), that will cause the component to re-render, which will call useEffect again and so on and so on.
I have this kind of problem on a few projects I'm currently working on, and it is very frustrating. So if you know how to answer this - thanks! :)
snippets
When using an empty dependency array and login count inside increaseCount, count will always be 0:
// Get a hook function
const {useState, useEffect} = React;
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.addEventListener("keydown", increaseCount);
}, []);
const increaseCount = () => {
setCount((prevCount) => prevCount + 1);
console.log(count);
};
return (
<div>
count = {count}
</div>
);
};
// Render it
ReactDOM.render(
<Counter />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
and when adding count to the dependency array, we see this "loop" thing happening:
// Get a hook function
const {useState, useEffect} = React;
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.addEventListener("keydown", increaseCount);
}, [count]);
const increaseCount = () => {
setCount((prevCount) => prevCount + 1);
console.log(count);
};
return (
<div>
count = {count}
</div>
);
};
// Render it
ReactDOM.render(
<Counter />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

What you should do really depends on what you need to do. See X Y problem.
As mentioned there are multiple use cases you are trying for.
const { useState, useEffect, useMemo, Fragment } = React;
const App = () => {
const [count, setCount] = useState(0);
function increaseCount(ev) {
setCount((count) => {
const newCount = count + 1;
// You can use the newCount here for something basic if needed...
console.log(newCount);
// I'm not positive, but I'm farily sure that setting other state
// from within a set state function might be problematic.
// If you feel the need to do something with side effects here,
// Consider another useEffect as below.
return newCount;
});
}
useEffect(() => {
document.addEventListener("keydown", increaseCount);
// Always clean up after your effect!
return () => document.removeEventListener("keydown", increaseCount);
// If you use `increaseCount` here as a dependency (which you should), the function will get recreated every time.
// Or you could set it up by creating the `increase count function inside the effect itself
}, [increaseCount]);
useEffect(() => {
// If you need to use newCount for something more complicated, do it here...
// Or for side effects
}, [count]);
const arrayCountSized = useMemo(() => {
// You can use the count here in a useMemo for things that are
// derived, but not stateful in-of-themselves
return new Array(count).fill(null).map((_, idx) => idx);
}, [count]);
return (
<Fragment>
<div>{count}</div>
<ul>
{arrayCountSized.map((row) => (
<li key={row}>{row}</li>
))}
</ul>
</Fragment>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"/>
As for the situation you mentioned in particular, here's one solution.
You can get the "current Index" from the array length normally, which is what I'm doing here.
If the "currentIndex" is more complicated than that and inexorably tied together with the array state, you should useReducer to set up that tied state in a pure fashion.
You could also use a reference to the array in your listener function.
const arrayRef = useRef(array);
useEffect(()=>{arrayRef.current=array},[array]);
// arrayRef.current is safe to use in any effect after this.
const { useState, useEffect, useMemo, Fragment } = React;
const App = () => {
const [array, setArray] = useState([]);
const curIndex = array.length - 1;
useEffect(() => {
function addKey(ev) {
if (ev.key.length === 1 && ev.key >= "a" && ev.key <= "z") {
setArray((arr) => [...arr, ev.key]);
}
}
document.addEventListener("keydown", addKey);
// Always clean up after your effect!
return () => document.removeEventListener("keydown", addKey);
}, []);
return (
<Fragment>
<div>Current Index: {curIndex}</div>
<div>Keys pressed: </div>
<ul>
{array.map((row, index) => (
<li key={index}>{row}</li>
))}
</ul>
</Fragment>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"/>
useReducer Approach:
As I don't have enough details, this is the same solution as above, just in a reducer.
const { useState, useEffect, useReducer, useMemo, Fragment } = React;
function reducer(state, key) {
if (!key) {
return state;
}
const array = [...state.array, key];
return { array, currentIndex: array.length - 1 };
}
const App = () => {
const [{ array, currentIndex }, addKey] = useReducer(reducer, {
array: [],
currentIndex: -1,
});
useEffect(() => {
function keydownListener(ev) {
if (ev.key.length === 1 && ev.key >= "a" && ev.key <= "z") {
addKey(ev.key);
}
}
document.addEventListener("keydown", keydownListener);
// Always clean up after your effect!
return () => document.removeEventListener("keydown", keydownListener);
}, []);
return (
<Fragment>
<div>Current Index: {currentIndex}</div>
<div>Keys pressed: </div>
<ul>
{array.map((row, index) => (
<li key={index}>{row}</li>
))}
</ul>
</Fragment>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"/>