Introducing use-models

Garrett R. Morris — Wed, 15 Apr 2020 17:20:44 +0000

Hello all,

I have published a library for react which i think people might find useful. I think it will make it easy for you to build large forms with validation without writing a ton of boiler plate code for your inputs. check out the demo using below link:

[https://r3wt.github.io/use-models/]

and let me know what you think. If you like the project, anyone is free to contribute ideas, bug reports, and pull requests on github. I am generally open to contributors regardless of skill level and experience.

Github: https://github.com/r3wt/use-models
NPM: https://www.npmjs.com/package/use-models

useEffect missing dependency, need advice

Garrett R. Morris — Fri, 10 Apr 2020 18:56:06 +0000

I am developing a react plugin called use-models, and i have ran into an issue and i'm having trouble determining what is the proper technique for dealing with the issue.

So, basically my plugin is for hooks and it allows you to define some state object with validation, and use input helpers. if you want to hydrate the state, perhaps from a db call or localstorage, you need to call hydrate() with an update object.

So, i wrote a simple function in my plugin:

function hydrate( _state, _errors=false ) {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
}

and my intent was for users to use this like so:

useEffect(()=>{
    hydrate({
        name:'Garrett',
        email:'test@test.com',
        newsletter: 'yes'
    });
},[]);

this works exactly how i intended it, however it leads to the dreaded linter warning:

React Hook useEffect has a missing dependency: 'hydrate'

Hmm, so how to solve this:

Should i simply change my example to pass in hydrate as a dependency? this feels wrong to me, as hydrate never changes.

So i thought to solve it at library level, by modifying hydrate:

function hydrate( _state, _errors=false ) {
    console.log('hydrate()');
    return useEffect(()=>{
        setState({...state,..._state});
        if(_errors){
            setErrors({...errors,..._errors});
        }
    },[_state,_errors]);
}

this works to eliminate the warning, but then i realized that users are still going to need to call hydrate() from within useEffect() on their components. Now i'm at a loss for what to do. can anyone give advice? if i pass hydrate as a dependency to useEffect() then the effect is executed on every re-render!

DEV Community: Garrett R. Morris

Introducing use-models

useEffect missing dependency, need advice