#044 USECALLBACK

App.jsx

import React, { useState, useCallback } from 'react'
import Lista from './Lista'

export default function App(){

    const [escuro, setEscuro] = useState(false)
    const [numero, setNumero] = useState(1000)

    /*const calculos = () => {
        return [numero*2, numero*3, numero*4]
    }*/

    const calculos = useCallback(() => {
        return [numero*2, numero*3, numero*4]
    }, [numero])

    const tema = {
        backgroundColor: escuro ? "black" : "white",
        color: escuro ? "white" : "black",
        height: "100vh"
    }

    return (
        <div style={tema}>
            <h1>React - useCallback</h1>
            <hr />
            <button onClick={() => setEscuro(old => !old)}>Tema</button>
            <p>Numero: {numero}</p>
            <button onClick={() => setNumero(oldNumero => oldNumero + 1)}>Incrementar</button>
            <hr />
            <Lista resultados={calculos}></Lista>
        </div>
    )
}

Lista.jsx

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

export default function Lista({resultados}){
    const [listaItems, setListaItems] = useState([])

    useEffect(() => {
        setListaItems(resultados())
        console.log('render')
    }, [resultados])

    return (
        listaItems.map(item => <p key={item}>{item}</p>)
    )
}