Review lần 1 - Githubissues

1; https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/components/Todo.js không nên viết function inline: onClick={() =>onDeleteClick(todo.id)} vì mỗi lần render file thì nó sẽ khởi tạo lại function => ảnh hưởng tới performence của component, nên tạo 1 biến và sử dụng hàm useCallback để xử lí sự kiện onClick, => const onDeleteClick = useCallback(() => { handleDeleteClick(todo.id) }, [todo.id]) onClick={onDeleteClick}

2: https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/components/TodoList.js Nên sử dụng memo vì có truyền prop todoList (todoList là 1 biến state => nó sẽ thay đổi trong quá trình người dùng sử dụng) 1: const a = useMemo(() => { return b; }, [todoList]) 2: export default memo(TodoList)

todoList.map(todo => nên kiểm tra mảng hoặc object có tồn tại, length > 0 trước rồi mới dùng hàm xử lí (map,filter, find, ......)

3: https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/components/footer.js => tốt 4; https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/components/header.js => tốt 5: https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/components/button/index.js => Không nên sử dụng biến đầu vào prop, vì nó có chưa tất cả prop default + prop custom => nhưng trong component mình chỉ cần lấy những prop custom => prop default sẽ dư thừa không cần thiết => ảnh hưởng tới performence

6: https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/components/input/index.js => Sửa giống số 5 import React from "react"; const Textfield = (Props) =>{ return ( <input className={Props.ClassName} id={Props.id} placeholder={Props.placeholder} value = {Props.value} onChange = {Props.onchange}> ) } export default Textfield => nên xử lí hàm onChange và truyền giá trị lên props parent tại component

import React from "react"; const Textfield = ({handleChange}) =>{ const onChange = useCallback((event) => { handleChange && handleChange(event.target.value) }, [handleChange]); return ( <input className={Props.ClassName} id={Props.id} => nên bỏ placeholder={Props.placeholder} value = {Props.value} onChange = {onChange}> ) }

7: https://github.com/ThaiHoangtvh/Reactjs2/blob/master/src/App.js const onTextInputChange = useCallback((e) =>{ setTextInput(e.target.value) },[]); => chỉ nên nhận giá trị value từ component input truyền lên setTextInput(value)

const onCheckBtnClick = useCallback((id,isCompleted) =>{
const setID = () =>{
  if(isCompleted === "true"){
    setTodoList(prevState => prevState.map(todo => todo.id === id ? {...todo, isCompleted: false}:todo))
  }else{
    setTodoList(prevState => prevState.map(todo => todo.id === id ? {...todo, isCompleted: true}:todo))
  }
}
setID();

},[]) => Không nên tạo function rồi gọi lại trong hook, vì bản thân hook khi được gọi thì nó sẽ thực hiện xử lí những dòng code trong hook đó rồi => xóa dòng const setID = () =>{ và dòng call funtion setID();

=> (id,isCompleted) không nên truyền nhiều biến vào, chỉ nên truyền 1 biến là object, và biến object đó sẽ chứa các phần tử của object đó, (id, a, isCompleted) => ({id,isCompleted}) onCheckBtnClick({id: 1, isCompleted; true })

<Textfield ClassName = "txt_add" id = "input_add" placeholder = "Nhập task..." value = {textInput} onchange = {onTextInputChange} /> => đổi tên props onchange => handleChange

ThaiHoangtvh / Reactjs2

Review lần 1 #1