vendredi 22 mai 2020

react-hooks/exhaustive-deps vs testing

since the latest version upgrade, react-hooks/exhaustive-deps disallows using a factory function for useEffect:

// considered ok:
function Component1({ name }) {
    React.useEffect(
        function effect() {
            console.log('wazzup', name);
        },
        [name],
    );
    return 'yay!';
}

// considered bad now:
const effect2 = (name) => () => {
    console.log('wazzup', name);
};
function Component2({ name }) {
    React.useEffect(effect2(name), [name]);
    return 'yay!';
}

Problem is, we preferred the second approach (which is considered bad practice now) because it allows us to test the effect-function in a nicely isolated way. It also reduces nesting a bit, which was a nice bonus.

What would be a good alternative approach that would still allow us to test the code for effect2 in an isolated way?

Aucun commentaire:

Enregistrer un commentaire