Product Designer & CEO at Mighty.
- Tweets 74
- Following 46
- Followers 93
- Likes 47
![Screenshot of React code showing two approaches to updating state:
Separate useState hooks:
const [message, setMessage] = useState('');
const [tags, setTags] = useState([]);
const [status, setStatus] = useState('active');
Single useReducer hook:
const [todo, updateTodo] = useReducer(
(data, partialData) => ({
...data,
...partialData,
}),
{ message: '', tags: [], status: 'active' }
);](https://venexa.site/media/FkWhrzHXkAA5tJS.jpg)
ALT Screenshot of React code showing two approaches to updating state: Separate useState hooks: const [message, setMessage] = useState(''); const [tags, setTags] = useState([]); const [status, setStatus] = useState('active'); Single useReducer hook: const [todo, updateTodo] = useReducer( (data, partialData) => ({ ...data, ...partialData, }), { message: '', tags: [], status: 'active' } );
ALT Screenshot of React code showing the difference between updating a value: Updating with useState: onChange={(e) => { setMessage(e.target.value); }} Updating with useReducer: onChange={(e) => { updateTodo({ message: e.target.value, }); }}
