useCallback() hook - Web dev Simplified
Published: 2023-01-03 14:15:44

## Part 1

**Folder Structure**

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

**App.js Code**

``` react
import { useState, useCallback } from "react";
import Todos from "./Todos";

const App = () => {
    const [count, setCount] = useState(0);
    const [todos, setTodos] = useState([]);

    const increment = () => {
        setCount((c) => c + 1);
    };

    // const addTodo = () => {
    //     console.log('inside function');
    //     setTodos((t) => [...t, "New Todo"]);
    // };

    const addTodo = useCallback(() => {
        console.log('inside function');
        setTodos((t) => [...t, "New Todo"]);
    }, [todos]);

    console.log('parent render');
    return (
        <>
            <Todos todos={todos} addTodo={addTodo} />
            <hr />
            <div>
                Count: {count}
                <button onClick={increment}>+</button>
            </div>
        </>
    );
};

export default App;
```

**Todos.js Code**

``` react
import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);
```

**Output**

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


![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85ze2wc19zcc6zxd1jps.png)

## Part 2

**Folder Structure**

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


**App.js Code**

``` react
import { useState, useCallback } from 'react'
import List from './List';


export default function App() {

    const [number, setNumber] = useState(1);
    const [dark, setDark] = useState(true);

    const getItems = useCallback(() => {
        return [number, number + 1, number + 2];
    }, [number]);

    const theme = {
        backgroundColor: dark ? "grey" : "white",
        color: dark ? "white" : "grey"
    };

    return (
        <div style={theme}>
            <input type='number' value={number} onChange={(e) => setNumber(e.target.value)} /> <br />
            <button onClick={() => setDark(prevDark => !prevDark)}> Toggle Theme </button>

            <List getItems={getItems} />
        </div>
    )
}
```

**List.js Code**

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

const List = ({ getItems }) => {

    const [items, setItems] = useState([]);

    useEffect(() => {
        setItems(getItems());
        console.log('updating items');
    }, [getItems]);

    console.log('in children', getItems());

    return items.map(item => <div key={item}> {item} </div>)
};

export default memo(List);
```

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


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