I am not Eminem.
So, I am not good at saying 7.6 words per second.
I am a React developer.
I barely say 0 words per second.
I do 7.6 state updates per second.
I make To-do apps.
This is how I made my handlers more readable with use-immer.
This is my Todo component.
import React from 'react';
function Todo({ completed, onChange, onDelete, text }) {
return (
<div>
<input
checked={completed}
name="completed"
onChange={onChange}
type="checkbox"
/>
<input name="text" onChange={onChange} type="text" value={text} />
<button onClick={onDelete}>Delete</button>
</div>
);
}
export default Todo;
This is my App component.
import React, { useState } from 'react';
import Todo from './Todo';
function App() {
const [todos, setTodos] = useState([]);
// const [todos, setTodos] = useImmer([]);
// imagine handlers here
return (
<>
{todos.map(({ completed, text }, index) => (
<Todo
completed={completed}
key={index}
onChange={handleTodoChange(index)}
onDelete={handleTodoDelete(index)}
text={text}
/>
))}
<button onClick={handleTodoAdd}>Add todo</button>
</>
)
}
export default App;
I need three handlers for:
- Adding a new todo
- Deleting a todo
- Editing a todo (its status or text)
And I'm going to write three ways doing that:
- The immutable way
- Using
immer'sproduce - Using
useImmerhook fromuse-immer.
For people that are not familiar with immer,produce is a function that provides a draft for you to mutate and produces the next immutable state.
useImmer is similar to useState except that the updater function provides you the draft that can be mutated.
Adding a todo
The immutable way:
const handleTodoAdd = () => {
setTodos(prev => [...prev, { completed: false, text: "" }]);
}
Using produce:
const handleTodoAdd = () => {
setTodos(prev =>
produce(prev, draft => {
draft.push({ completed: false, text: "" });
})
);
}
Using useImmer:
const handleTodoAdd = () => {
setTodos(draft => {
draft.push({ completed: false, text: "" });
});
}
Deleting a todo
The immutable way:
const handleDeleteClick = i => () => {
setTodos(prev => prev.filter((_, j) => j !== i));
}
Using produce:
const handleDeleteClick = i => () => {
setTodos(prev =>
produce(prev, draft => {
draft.splice(i, 1);
})
);
}
Using useImmer:
const handleDeleteClick = i => () => {
setTodos(draft => {
draft.splice(i, 1);
});
}
Editing a todo
The immutable way:
const handleTodoChange = i => ({ target }) => {
const value = target.type === "checkbox" ? target.checked : target.value;
setTodos(prev =>
prev.map((todo, j) => {
if (j === i) {
return {
...todo,
[target.name]: value
};
}
return todo;
})
);
};
Using produce:
const handleTodoChange = i => ({ target }) => {
const value = target.type === "checkbox" ? target.checked : target.value;
setTodos(prev =>
produce(prev, draft => {
draft[i][target.name] = value;
})
);
};
Using useImmer:
const handleTodoChange = i => ({ target }) => {
const value = target.type === "checkbox" ? target.checked : target.value;
setTodos(draft => {
draft[i][target.name] = value;
});
};
Top comments (3)
Nice, as someone fairly inexperienced with react I can still follow what you’re doing and it looks quite similar to how the logic would be in say an angular component or something - may have to give this sort of thing a go some time :) one thing I would say is the
iandjnotation is not very readable - I know they’re a throw back to older languages and are quite well understood but it would be fairly trivial to make these a lot clearer especially to someone unfamiliar with the framework/library/context :)Thank you for your comment. I never use
iandj. I did that in order to make some functions appear shorter. In real projects I'd useindex,todoIndexetc.Help, how do I mute users from my feed?