@rkmodules/use-inner

use-inner

This is a very simple wrapper around Reacts useState. The entire implementation is this:

export const useInner = <T>(
    outer: T,
    watch?: any[]
): [T, React.Dispatch<React.SetStateAction<T>>] => {
    let [inner, setInner] = React.useState<T>(outer);
    React.useEffect(() => {
        setInner(outer);
    }, watch || [outer]);
    return [inner, setInner];
};

usage

use useInner as a local shallow copy of some prop from outside. One place I use this a lot is where a default value is given through props (which may change), but there is also an inner state.

npm install @rkmodules/use-inner

import useInner from "@rkmodules/use-inner";

examples

"lazy" input, that only updates the outside on blur

function LazyInput({ value, onChange }) {
    let [inner, setInner] = useInner(value);
    // inner now changes whenever value changes, but also on setInner

    const handleChange = (e) => {
        setInner(e.target.value);
    };
    const handleBlur = (e) => {
        onChange(inner);
    };

    return <input value={inner} onChange={handleChange} onBlur={handleBlur} />;
}

explicit watch list, useful for mapped props

function LazyArray({ value, onChange }) {
    let [inner, setInner] = useInner(value.toUpperCase(), [value]);
    // inner now changes whenever value changes, but also on setInner. In this cases also when capitalization changes

    const handleChange = (e) => {
        setInner(e.target.value);
    };
    const handleBlur = (e) => {
        onChange(inner);
    };

    return <input value={inner} onChange={handleChange} onBlur={handleBlur} />;
}

# project setup

followed https://www.twilio.com/blog/2017/06/writing-a-node-module-in-typescript.html for project setup