Hello 5 chăm ae, lại là Tú Pê Vê đây 😁. Bài viết này mình sẽ giới thiệu với các bạn về custom là gì và dùng như thế nào nhé.

Custom hook là những hook riêng do chúng ta tạo, để chúng ta chia sẻ state, logic giữa các component với nhau.

Mình để ví dụ ở đây anh em có thể vào xem thử nhé

const [user, setUser] = useState({});

useEffect(() => {
  getUser().then((res) => {
    setUser(res.data);
  });
}, []);

Mình sẽ tạo file bắt đầu bằng chữ use để cho đồng bộ với các hook của React như useState, useEffect… thì mình custom cũng thế. Mình sẽ tạo

Khi custom hook chúng ta ko cần return về jsx nữa, chúng ta thường return về 1 object hoặc array gì đấy hoặc rerturn thẳng về value luôn cũng được :v. Tùy theo component của mình dùng gì thì mình sẽ return về cái đấy.

Mình có thể truyền value khởi tạo như useState chẳng hạn, để tăng tính linh hoạt hơn hook của mình.

Khi mình chạy component cart, thì ở đây mình có gọi hook useUser() nên sẽ chạy hàm useUser thì trong đó nó gọi useState cũng như useEffect làm cho component Cart của mình re-render đồng thời nó cập nhật user cho cúng ta. Y hệt mình dùng như bình thường, chỉ khác là mình tách ra 1 function riêng biệt, nhờ vậy chúng ta có thể dùng lại logic giữa các component với nhau có thể gọi là common hơn 👍

Hy vọng bài này sẽ giúp ae hiểu được custom hook là gì và áp dụng khi cần thiết nhé. Gút baiiiiiiiii 🙋‍♂️