Lập vô hạn khi sử dụng useEffect trong React Hooks

[giadat99 (Trương Gia Đạt)]

Em mới làm quen React Hooks , vấn đề ở đây của em là khi em filter dữ liệu thì nó bị lặp vô hạn và em tìm cách trên mạng thì thấy dùng useMemo() , em làm theo thì khắc phục được, chạy ổn không lỗi. Nhưng em có đọc doc useMemo() dũng kĩ thuật memorization để hạn chế việc render lại còn useEffect() có dependencies thì nó sẽ chạy khi mà dependencies thay đổi
Cái luồng đi của em là từ TaskList sẽ truyền giá trị filter ra thằng App để thằng App filter rồi trả ngược danh sách về TaskList để hiện thị. Trong TaskList và App em đều có state là filterName và filterStatus :

const [filter, setFilter] = useState({
    filterName: '',
    filterStatus: 0
})

Đây là lỗi lập vô hạn khi em dùng useEffect trong App component:

useEffect(() => {
    if (filter) {
        if (filter.filterName) {
            setTaskList(taskList.filter(task => {
                return task.name.toLowerCase().indexOf(filter.filterName.toLowerCase()) !== -1;
            }))
        }
       let filterStatus = parseInt(filter.filterStatus);
        setTaskList(taskList.filter(task => {
            if (filterStatus === 0) {
                return task;
            } else {
                return task.status === (filterStatus === 1 ? false : true);
            }
        }))
    }
} , [filter , taskList])

Đây là cách khắc phục em tìm được trên mạng sử dũng useMemo() :

const tasks = useMemo(() => {
    let tasksFilter = [...taskList];
    if (filter) {
        if (filter.filterName) {
            tasksFilter = taskList.filter(task => {
                return task.name.toLowerCase().indexOf(filter.filterName.toLowerCase()) !== -1;
            });
        }
        let filterStatus = parseInt(filter.filterStatus);
        return tasksFilter.filter(task => {
            if (filterStatus === 0) {
                return task;
            } else {
                return task.status === (filterStatus === 1 ? false : true);
            }
        });
    }
}, [filter, taskList]);

Mọi người có thể giải thích cho em tại sao bị lập vô hạn và cách khắc phục trong trường hợp của em không ?
Đây là topic đầu tiên em hỏi cho nên có gì sai sót trong cách đưa vấn đề của mình , cách đặt câu hỏi và nhiều thứ khác , mong mọi người thông cảm và chỉ em khắc phục để em không bị mắc phải trong các topic khác

[qloved (Quân)]

Lí do bị lặp rất đơn giản. Bạn đặt phụ thuộc vào 2 biến nhưng trong useEffect bạn lại thấy đổi giá trị của 1 trong 2 biến đó => useEffect chạy lại 1 lần nữa => biến thay đổi cứ thế không bao giờ dừng được. Cách giải quyết thì có 1 cách là dùng memo như bạn đã dùng. Tuy nhiên có 1 cách khác là setState cho 1 biến temp khác.
Ví dụ như bài của bạn thì tạo thêm state mới như sau:

const [filterTaskList, setFilterTaskList] = useState([]);

Trong use efffect thay vì setTaskList thì setFilterTaskList. Còn ở nơi render thì đổi hết sang filterTaskList thay cho taskList
Về cơ bản thì cách dùng memo hay cách mình nói ở trên đều có một điểm chung là né thay đổi cái thằng gốc ban đầu ra là sẽ không bị loop nữa