Quando devo criar um hook no react?

[Romeusorionaet]

Criar um hook no ReactJS é uma maneira poderosa de compartilhar lógica entre componentes funcionais. Os hooks foram introduzidos no React 16.8 para permitir que os componentes funcionais tenham estado interno e usem recursos do React, como o ciclo de vida, sem precisar converter o componente para uma classe.

Existem vários motivos pelos quais você pode querer criar um hook no ReactJS:

• Reutilização de lógica
• Compartilhamento de estado
• Separação de preocupações
• Manipulação de efeitos colaterais
• Melhorar o desempenho

No geral, criar um hook no ReactJS permite que você escreva componentes mais reutilizáveis, modulares e fáceis de manter. Eles são uma das principais características do React e uma parte fundamental do desenvolvimento de componentes funcionais mais avançados.

Hook de exemplo:

import { TransactionsContext } from '../contexts/TransactionsContext'
import { useContextSelector } from 'use-context-selector'
import { useMemo } from 'react'

export function useSummary() {
  const transactions = useContextSelector(TransactionsContext, (context) => {
    return context.transactions
  })

  const summary = useMemo(() => {
    return transactions.reduce(
      (acc, transaction) => {
        if (transaction.type === 'income') {
          acc.income += transaction.price
          acc.total += transaction.price
        } else {
          acc.outcome += transaction.price
          acc.total -= transaction.price
        }
        return acc
      },
      {
        income: 0,
        outcome: 0,
        total: 0,
      },
    )
  }, [transactions])

  return summary
}

Para fazer uso da hook criado:

import { useSummary } from '../../hooks/useSummary' // Faz a importação passando o caminho correto
const summary = useSummary() // Faz a chamada salvando em uma const para assim fazer uso