side effect in useMemoOne

https://codesandbox.io/s/condescending-poitras-zp2t7?file=/src/App.js

import React, { useState, useMemo } from "react";
import { useMemoOne } from "use-memo-one";
import "./styles.css";

export default function App() {
    const [state, setState] = useState(0);

    const [count, setCount] = useState(0);

    useMemoOne(() => {
        setState(count + 10);
    }, [count]);
    return (
        <div className="App">
            <h1>{count}</h1>
            <h2>{state}</h2>
            <button onClick={() => setCount((c) => c + 1)}>setCount</button>
        </div>
    );
}

If it has some side effect in useMemoOne, like set other state, it makes App re-render. And this useMemoOne will run again though count if not changed, which causes the infinite loop.

Use React.useMemo will be OK.

[gmoniava]

@miuirussia No it doesn’t say that. If you refer to this:

While you probably don’t need it, in rare cases that you do (such as implementing a <Transition> component), you can update the state right during rendering

the bold text above is talking about getDerivedStateFromProps not about calling setState (inside a condition) during render.

Although indeed OPs callback passed to useMemoOne wouldn’t fit in the description of allowed callback based on the quote from react docs which you mention (because it uses setState without condition), but still it is interesting if we replace useMemoOne with useMemo in OPs example, it doesn’t suffer same issue.

[miuirussia]

Yes, but it is clearly written there that you should not do this