Hey!

Before we start — let me show you a problem.

You are building a simple counter. You use useState.

const [ count , setCount ] = useState ( 0 );

Enter fullscreen mode

Exit fullscreen mode

Works perfectly. No complaints.

Now the requirements change.

Your counter needs to:

Increment by 1

Decrement by 1

Reset to 0

Increment by a custom amount

Decrement by a custom amount

So you start adding more logic.

function increment () { setCount ( count + 1 ); }

function decrement () { if ( count > 0 ) { setCount ( count - 1 ); } }

function reset () { setCount ( 0 ); }

function incrementByAmount ( amount ) { setCount ( count + amount ); }

function decrementByAmount ( amount ) { if ( count - amount >= 0 ) { setCount ( count - amount ); } }

Enter fullscreen mode

Exit fullscreen mode

Five separate functions. All of them scattered around your component. All of them touching the same state in different ways.

Now imagine your component has 3 or 4 pieces of state — not just a counter.…