Custom Hooks - Web dev simplified
Published: 2023-01-04 09:35:26

## Part 1

**Folder Structure**

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydedv0klnhg8t7o92b92.png)


**App.js Code**

``` react
import useFetch from "./useFetch";

const App = () => {
    //   const [data, setData] = useState(null);
    //   useEffect(() => {
    //     fetch("https://aksh-crud.azurewebsites.net/api/v1")
    //       .then((res) => res.json())
    //       .then((data) => setData(data));
    //  }, []);

    const data = useFetch("https://aksh-crud.azurewebsites.net/api/v1");
    console.log('parent', data);

    return (
        <>
            {!data ? <h1> Loading Data </h1> :
                data.map((item) => {
                    return <h1 key={item._id}>{item.title} - {item.desc}  <hr /></h1> ;
                })}
        </>
    );
};

export default App;
```

**useFetch.js Code**

``` react
import { useState, useEffect } from "react";

const useFetch = (url) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        console.log('useEffect children', data);
        fetch(url)
            .then((res) => res.json())
            .then((data) => {
                setData(data)
            });
        // eslint-disable-next-line
    }, [url]);


    return data;
};

export default useFetch;
```

**Output**

![Output Phot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69a13qssicfmohfmqedk.png)

---

## Part 2

**Folder Structure**

![Folder Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2hli79kz6xdrhj00jes.png)

**App.js Code**

``` react
import useLocalStorage from './useLocalStorage'
import useUpdateLogger from './useUpdateLogger';


export default function App() {
    const [name, setName] = useLocalStorage("name", '');

    const [sname, setSname] = useLocalStorage("sname", '');

    useUpdateLogger(name)
    console.log('app component');
    return (
        <>
            <input type="text" value={name} onChange={e => setName(e.target.value)} />
            {name}

            <input type="text" value={sname} onChange={e => setSname(e.target.value)} />
            {sname}
        </>
    )
}
```
**useLocalStorage.js Code**

``` react
import { useState, useEffect } from 'react'

function getSavedValue(key, initialValue) {
    console.log('inside getSavedValue');
    const savedValue = localStorage.getItem(key) === '' ? '' : JSON.parse(localStorage.getItem(key));
    if (savedValue) return savedValue;

    if (initialValue instanceof Function) return initialValue();
    return initialValue

}


export default function useLocalStorage(key, initialValue) {
    const [value, setValue] = useState(() => {
        return getSavedValue(key, initialValue);
    });

    useEffect(() => {
        console.log('children useEffect');
        localStorage.setItem(key, JSON.stringify(value));
        console.log(localStorage.setItem(key, JSON.stringify(value)));
    }, [value]);

    console.log('children component');

    return [value, setValue];
}
```

**useUpdateLogger.js Code**

``` react
import { useEffect } from 'react'

const useUpdateLogger = (value) => {

    useEffect(() => {
        console.log('useUpdateLogger', value);
    }, [value])
  return (
    <div>
      updatelogger component
    </div>
  )
}

export default useUpdateLogger

```

**Output Image**
![Output Photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qtpghin0k4veinlok52.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)