DEV Community

React Hooks cheat sheet

Juraj Pavlović on March 02, 2020

Not so long ago I started working with functional components instead of class based ones. The main goal was to learn how to implement React Hooks i...

Read full post

guico33 • Mar 3 '20

const App = () => {
    const [carSpeed, updateCarSpeed] = useState(10);
    return (
        <div>
            <p>Car is going {carSpeed} km/h</p>
            <button onClick={() => updateCarSpeed(carSpeed + 5)}>
                Speed up
            </button>
        </div>
    );
};

Every time the next state is based on the existing one, better use the callback version of the state updater. Here it would be updateCarSpeed(prevCarSpeed => prevCarSpeed + 5).

Juraj Pavlović Bornfight • Mar 3 '20

I will be glad to use the callback version. Thank you for the advice. Do you mind explaining in more detail, why exactly is it better to use the callback version?

Maciek Grzybek • Mar 3 '20

I think it's similar to setState in the class components - you can be sure that you're updating the correct value, am I right @guico33 ?

William Cantin • Mar 4 '20

Yes

Vadorequest • Mar 3 '20

If you're interested to see more functional components with TypeScript, check out our recent github.com/UnlyEd/next-right-now OSS release. We also prefer functional components over classes, and thus hooks over HOC.