Estoy experimentando con React intentando hacer un task manager app. Estoy intentando memorizar los componentes con memo, pero al hacerlo el state se comporta de manera rara, al completar una tarea haciendo click en el checkbox de 2 tareas distintas se descompletan otras adjunto gif para que se entienda a lo que me refiero:
dejo el repo en git: https://github.com/FrancoRodao/learning-react
También dejo un codebox con el código completo:
Task component:
import React, { useState, useEffect } from 'react'
import TaskRow from "../TaskRow";
const initialState = [{"id":1,"title":"1","description":"","done":false},{"id":2,"title":"2","description":"","done":false},{"id":3,"title":"3","description":"","done":true}]
function Tasks(props) {
const [taskItems, setTaskItems] = useState(initialState)
useEffect(() => {
if (!props.newTask) return
newTask({ id: taskItems.length + 1, ...props.newTask })
}, [props.newTask])
const newTask = (task) => {
updateItems([...taskItems, task].map((task) => ({ ...task })))
}
const toggleDoneTask = (id) => {
let taskItemsCopy = [...taskItems].map((task) => ({ ...task }))
let newItems = taskItemsCopy.map((t) => {
if (t.id === id) {
t.done = !t.done
};
return t;
})
updateItems(newItems)
}
const updateItems = (tasks) => {
localStorage.setItem('tasks', JSON.stringify(tasks))
setTaskItems(tasks)
}
return (
<React.Fragment>
<h1>learning react </h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
{
props.show ? taskItems.map((task, i) =>
<TaskRow
task={task}
key={task.id}
toggleDoneTask={toggleDoneTask}>
</TaskRow>)
:
taskItems.filter((task) => !task.done)
.map((task) =>
<TaskRow
show={props.show}
task={task}
key={task.id}
toggleDoneTask={toggleDoneTask}></TaskRow>
)
}
</tbody>
</table>
</React.Fragment>
)
}
export default Tasks
Task Row (task item) component
import React, { memo } from 'react'
import styled from "styled-components"
const Tr = styled.tr`
display: block;
/* height: ${props => props.show && props.taskDone ? '100%' : '0px'};
opacity: ${props => props.show && props.taskDone ? '1' : '0'};
visibility: ${props => props.show && props.taskDone ? 'visible' : 'hidden'};
transition: 0.2s; */
`;
function TaskRow(props) {
return (<React.Fragment>
{console.log('render', props.task)}
<Tr show={props.show} taskDone={props.task.done}>
<td>
{props.task.title}
</td>
<td>
{props.task.description}
</td>
<td>
<input type="checkbox"
checked={props.task.done}
onChange={() => props.toggleDoneTask(props.task.id)}
/>
</td>
</Tr>
</React.Fragment>)
}
export default memo(TaskRow, (prev, next) => {
const prevTaskKeys = Object.keys(prev.task);
const nextTaskKeys = Object.keys(next.task);
const sameLength = prevTaskKeys.length === nextTaskKeys.length;
const sameEntries = prevTaskKeys.every(key => {
return nextTaskKeys.includes(key) && prev.task[key] === next.task[key];
});
return sameLength && sameEntries;
})
Encontré una solución que es utilizando setTaskItems como funcion, pero no entiendo por que tengo que utilizarla como funcion si no estoy modificando el estado múltiples veces.