Introduction

React hooks have revolutionized how we write components in React applications, enabling cleaner, more reusable code with better state management. When combined with Web3 technologies, hooks become even more powerful, allowing developers to seamlessly integrate blockchain functionality into their applications. In this post, we'll explore practical React hooks patterns and demonstrate how to integrate them with Web3 React, a popular library for Ethereum dApp development.

---

Understanding React Hooks Patterns

React hooks provide a way to reuse stateful logic without changing component hierarchy. Here are some essential patterns that can improve your Web3 application:

1. Custom Hooks for Web3 Logic

Creating custom hooks helps encapsulate Web3-related logic, making it reusable across components. For example, a useWallet hook can manage wallet connections:

import { useState, useEffect } from 'react';
import { useWeb3React } from '@web3-react/core';

export const useWallet = () => {
  const { account, library, activate, deactivate } = useWeb3React();
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (account && library) {
      library.getBalance(account).then((bal) => {
        setBalance(bal.toString());
      });
    }
  }, [account, library]);

  return { account, balance, activate, deactivate };
};

2. State Management with useReducer

For complex state transitions (e.g., handling transaction states), useReducer is a better alternative to useState:

const initialState = { loading: false, error: null, txHash: null };

function txReducer(state, action) {
  switch (action.type) {
    case 'SEND':
      return { ...state, loading: true };
    case 'SUCCESS':
      return { loading: false, error: null, txHash: action.payload };
    case 'ERROR':
      return { loading: false, error: action.payload, txHash: null };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(txReducer, initialState);

---

Integrating Web3 React with Custom Hooks

Web3 React provides essential hooks like useWeb3React for accessing the Ethereum provider, account, and chain ID. Here's how to integrate it effectively:

1. Wallet Connection Management

Create a custom hook to handle wallet connections (MetaMask, WalletConnect, etc.):

import { injected } from '../connectors'; // Your Web3 connector

export const useConnectWallet = () => {
  const { activate, deactivate } = useWeb3React();

  const connect = async () => {
    try {
      await activate(injected);
    } catch (error) {
      console.error('Connection error:', error);
    }
  };

  const disconnect = () => {
    deactivate();
  };

  return { connect, disconnect };
};

2. Listening to Chain Changes

Detect when a user switches networks using the useWeb3React hook:

export const useChainListener = () => {
  const { chainId } = useWeb3React();

  useEffect(() => {
    if (chainId !== 1) {
      alert('Please switch to Ethereum Mainnet!');
    }
  }, [chainId]);
};

---

Advanced Patterns for Web3 Applications

1. Contract Interaction Hook

Encapsulate contract calls in a reusable hook:

import { useWeb3React } from '@web3-react/core';
import { ethers } from 'ethers';
import ERC20_ABI from '../abis/ERC20.json';

export const useTokenBalance = (tokenAddress) => {
  const { account, library } = useWeb3React();
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (!account || !library) return;

    const contract = new ethers.Contract(
      tokenAddress,
      ERC20_ABI,
      library.getSigner()
    );

    contract.balanceOf(account)
      .then((bal) => setBalance(ethers.utils.formatEther(bal)))
      .catch(console.error);
  }, [account, library, tokenAddress]);

  return balance;
};

2. Transaction Status Tracking

Track transaction status with a custom hook:

export const useTransaction = () => {
  const [txState, setTxState] = useState({
    pending: false,
    success: false,
    error: null,
  });

  const sendTx = async (txFn) => {
    setTxState({ pending: true, success: false, error: null });
    try {
      const tx = await txFn();
      await tx.wait();
      setTxState({ pending: false, success: true, error: null });
    } catch (error) {
      setTxState({ pending: false, success: false, error });
    }
  };

  return { ...txState, sendTx };
};

---

Conclusion

React hooks provide an elegant way to manage state and side effects in Web3 applications. By leveraging custom hooks, you can encapsulate blockchain interactions, making your code more modular and maintainable. Web3 React simplifies Ethereum integration, and when combined with these patterns, it becomes a powerful tool for building decentralized applications.

Remember to:

• Use custom hooks to abstract Web3 logic
• Leverage useReducer for complex state
• Handle wallet connections and chain changes gracefully
• Reuse contract interaction logic with hooks

By adopting these patterns, your dApp development process will become more efficient and your codebase cleaner. Happy coding!