react-lazy-update

Optimized update hook for react.

Overview

To use state in functional components we can call useState() hook. It returns state and state setter function.

const [ state, setState ] = useState(0);

We can call this function as many times as we need to create separate state variables.

const [ value1, setValue1 ] = useState(0);
const [ value2, setValue2 ] = useState(0);

We can use our new values and update them using setter function:

setValue1(1);

After each state change our component will be re-rendered with new values. But what if we're updating state several times?

const onClick = () => {
    setValue1(1);
    setValue2(2);
};

return (
    <button onClick={ onClick }>update me</button>
);

Fortunatelly React handles such cases - state update will be postponed (called asynchronously) and our component will be re-rendered only once. We can check it by adding some console logs:

const Button = () => {
    console.log('render');

    const [ value1, setValue1 ] = useState(0);
    const [ value2, setValue2 ] = useState(0);

    const onClick = () => {
        console.log('onClick');
        setValue1(1);
        console.log('setValue1');
        setValue2(2);
        console.log('setValue2');
    };

    return (
        <button onClick={ onClick }>update me</button>
    );
}

After click on a button we will see:

onClick
setValue1
setValue2
render

Nice! We updated state twice, but component re-rendered only once.

Unfortunatelly it not always works this way. Let's modify our click handler a bit:

    const onClick = () => {
        console.log('onClick');
        setTimeout(() => {
            console.log('timeout');
            setValue1(1);
            console.log('setValue1');
            setValue2(2);
            console.log('setValue2');
        }, 0);
    };

And then click our button:

onClick
timeout
setValue1
render
setValue2
render

Oops. Now our component renders itself twice. But why? Looks like React have some problems with updating state in some uncontrolled cases (like async callbacks). There is a post about it.

But fortunatelly we can fix it with react-lazy-update!

Installation

As any other npm package react-lazy-update can be added to your project by following command:

npm i -S react-lazy-update

It requires any version of react with new context API support as peer dependency, so it should be installed as well.

npm i -S react

API

lazy

react-lazy-update exports lazy() HoC. We just need to wrap our component with it:

import lazy from 'react-lazy-update';

const Button = () => {
    ...
}

export default lazy(Button);

useState (useLazyState)

For lazy component we just need to replace React.useState() with useLazyState() provided by react-lazy-update:

// import { useState } from 'react';
import lazy, { useLazyState } from 'react-lazy-update';

Or we can use alias useState() to make replacement even easier:

import lazy, { useState } from 'react-lazy-update';

const Button = () => {
    ...
};

export default lazy(Button);

Now our button works as expected and renders only once:

onClick
timeout
setValue1
setValue2
render

Nice again! =)

useReducer (useLazyReducer)

We can also replace React.useReducer() hook with useLazyReducer() provided by react-lazy-update:

import lazy, { useLazyReduccer } from 'react-lazy-update';

const Button = () => {
    const [ value1, dispatch1 ] = useLazyReduccer(reducer1, 0);
    const [ value2, dispatch2 ] = useLazyReduccer(reducer2, 0);

    const onClick = () => {
        setValue1(actionCreator1('click'));
        setValue2(actionCreator2('click'));
    };

    return (
        <button onClick={ onClick }>update me</button>
    );
}

export default lazy(Button);

And, of course, we can use useReducer() alias to make life easier.