Sergioamjr

import { useCallback } from "react";

export default function Parent() {

  const doSomething = useCallback(() => {
    // A função sempre terá a mesma referência.
  }, []);
  
  const doAnotherThingWithAandB = useCallback(() => {
    // Sua referência irá mudar quando a e b mudarem.

Sergioamjr

import { useMemo } from "react";

export default function Component() {
  const value = useMemo(() => {
    // Faz algo complexo e demorado.
    // Se x e y já tiverem sido usados, irá retornar o valor anterior memorizado.
  }, [x, y]);
}

Sergioamjr

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
}

Sergioamjr

import { useRef, useEffect, forwardRef } from "react";

export default function Parent() {
  const childRef = useRef(null);

  return <Text ref={childRef} />;
}

const Text = forwardRef((props, ref) => {
  return <p ref={ref}>Exemplo de texto</p>;

Sergioamjr

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

export default function Form() {
  const [text, setText] = useState("");
  const timeToCallSomething = useRef(null);

  const fetchSomething = () => {
    // Realiza alguma requisição http.
  };

Sergioamjr

const time = useRef(0);
console.log(time.current); // 0;

Sergioamjr

useEffect(() => {
  // Executa a função logo antes de desmontar o componente.
  return () => doSomething();
}, []);

Sergioamjr

useEffect(() => {
  // Faz algo com x atualizado.
}, [x]);

Sergioamjr

useEffect(fn, []);

Sergioamjr

import { useEffect } from "react";

export default function Component() {
  const [filters, setFilters] = useState([]);
  
  const fetchSomething = (params) => {};
  const onResizeScreenHandler = () => {};

  // Observa mudanças no estate filters.
  useEffect(() => {