#27 Custom useImageOnload

src/custom_hooks/index.js

@@ -1,12 +1,16 @@
+//* LIBRARY
 import React from 'react';
-import Learn_1 from './learn_1/useFetch';
-import Learn_2 from './learn_2/useDebounce';
+
+// import Learn_1 from './learn_1/useFetch';
+// import Learn_2 from './learn_2/useDebounce';
+// import Learn_3 from './learn_3/useImageOnload';
 
 const CustomHook = () => {
   return (
     <>
       {/* <Learn_1 /> */}
       {/* <Learn_2 /> */}
+      {/* <Learn_3 /> */}
     </>
   );
 };

src/custom_hooks/learn_3/useImageOnload/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import useImageOnload from './useImageOnload';
+
+function Learn_3() {
+  const imageUrl =
+    'https://res.cloudinary.com/ecommerce2021/image/upload/v1663398918/profile-forme/avatar_ws0jhh.png';
+  const [loaded, error] = useImageOnload(imageUrl);
+
+  return (
+    <div>
+      {error && <p>{error}</p>}
+      {loaded ? (
+        <img src={imageUrl} alt="Loaded Image" style={{ width: '50%' }} />
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+}
+
+export default Learn_3;

src/custom_hooks/learn_3/useImageOnload/useImageOnload.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+function useImageOnload(src) {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const image = new Image();
+
+    const handleLoad = () => {
+      setLoaded(true);
+      setError(null);
+    };
+
+    const handleError = () => {
+      setLoaded(false);
+      setError('Error loading image');
+    };
+
+    image.addEventListener('load', handleLoad);
+    image.addEventListener('error', handleError);
+
+    // Bắt đầu tải hình ảnh khi src thay đổi
+    image.src = src;
+
+    // Hủy bỏ event listeners khi component bị unmount
+    return () => {
+      image.removeEventListener('load', handleLoad);
+      image.removeEventListener('error', handleError);
+    };
+  }, [src]);
+
+  return [loaded, error];
+}
+
+export default useImageOnload;