Encountering stale state when trying to pass state to sibling component - reactjs

Question

I'm building a simple to do list, and the code I'm trying to execute here is that when each task is clicked ('Task' component), it updates the parent state ('taskEdit') with the current task object. When taskEdit changes, a useEffect would run to re-render the whole component so that the parent can pass that object to another component ('EditTask' component) which is a modal that allows the user to edit the task, AND setEditModalVisible(true) would be run so that the Edit Task modal can be shown.
However, the issue is that when I do this, the 'EditTask' component renders with the previous state.
I.e. I click task A, and then Edit Task renders with an empty task object ({}), i.e. the initial state.
Then I click task B, and then Edit Task renders with the task A object.
Code is below. Any help is much appreciated!
Parent Component - taskEdit state is initialized here, and setTaskEdit is passed to the child Task component. When it's updated, I intend to pass the updated taskEdit state to the Edit Task component
When I press the task, in addition to updating the task object, it would update taskEditTrigger to true, which would allow the setEditModalVisible to continue - then I'd set it to false so that any further renders wouldn't trigger editModalVisible
const [editModalVisible, setEditModalVisible] = useState(false);
const [taskEditTrigger, setTaskEditTrigger] = useState(false);
const [taskEdit, setTaskEdit] = useState({});
useEffect(() => {
if (taskEditTrigger) {
setEditModalVisible(true)
setTaskEditTrigger(false)
} else {
setTaskEditTrigger(false)
}
}, [taskEdit]);
const renderItem = ({ item }) => (
<Task
item={item}
setTaskEdit={setTaskEdit}
setTaskEditTrigger={setTaskEditTrigger}
/>
);
return (
<View>
<FlatList
data={toDos}
renderItem={renderItem}
/>
<EditTask
item={taskEdit}
editModalVisible={editModalVisible}
setEditModalVisible={setEditModalVisible}
/>
</View>
Task Component - on pressing the task component, I intended to update the taskEdit state in the parent component with the current task
const Task = ({ item, setTaskEdit, setTaskEditTrigger })
const onPressTask = () => {
console.log(item.text)
console.log('Task is rendering')
if (item.isComplete) {
setIsTaskCompleteAlertVisible(true)
} else {
setTaskEdit(item)
setTaskEditTrigger(true)
}
};
return (
<View>
<TouchableOpacity onPress={onPressTask}>
<Text>{item.text}</Text>
</TouchableOpacity>
</View>
Export default memo(Task, (prevProps, nextProps) => {
If (prevProps.item.id === nextProps.item.id &&
prevProps.item.text === nextProps.item.text)
{
return true
}
return false
})
**Edit Task Component - I then intended to pass the item={taskEdit} into the Edit Task component to show the relevant task information **
function EditTask({
item, editModalVisible, setEditModalVisible}) {
console.log(item)
const [editingText, setEditingText] = useState(item.text);
const onPressEditTask = () => {
setEditModalVisible(false)
setTaskEdit({})
};
return (
<Modal visible={editModalVisible}>
<TouchableOpacity onPress={onPressEditTask}>
<Text>{editingText}</Text>
</TouchableOpacity>
</Modal>

Answer 1

Thanks to all the comments - found the reason for this issue.
I was able to lift the lift the taskEdit state from the Task component and pass it down from the parent component to EditTask successfully.
However, in EditTask I was updating the editingText state using the item.text property - and that was what was stale. When I updated the editingText state directly in Task and passed it by the same way to the Edit Task component, it was no longer stale.