Below are two ways of implementing a simple counter in a React application:
Here's how to achieve that with useReducer:
import { useReducer } from 'react';
const initialState = {
count: 0,
};
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
};
function ParentComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<ChildComponent dispatch={dispatch} />
</div>
);
}
function ChildComponent(props) {
return (
<div>
<button onClick={() => props.dispatch({ type: "increment" })}>
Increment
</button>
<button onClick={() => props.dispatch({ type: "decrement" })}>
Decrement
</button>
</div>
);
}
Here's how to achieve that using useState
import { useState } from 'react';
function ParentComponent() {
const [state, setState] = useState({ count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<ChildComponent setState={setState} />
</div>
);
}
function ChildComponent(props) {
return (
<div>
<button onClick={() => props.setState({ count: props.count + 1 })}>
Increment
</button>
<button onClick={() => props.setState({ count: props.count - 1 })}>
Decrement
</button>
</div>
);
}
Which one are you picking and why?
Top comments (1)
useState for local, useReducer for global, plus to avoid props drilling