React dApp Development with Wagmi: Setup, Hooks & Migration

This guide covers wagmi react integration, wagmi v2 migration, and wagmi hooks for reading and writing contracts. It is essential for react dapp development and web3 frontend creation on Ethereum. Ethereum React development is simplified with Wagmi. WalletConnect React integration works via the walletConnect connector. SSR Wagmi Next.js integration requires proper client/server separation.

SSR hydration in Next.js App Router with Wagmi is a common headache. We've faced projects where useAccount() returns disconnected on the server, desynchronizing the client store. The solution is strict separation of client and server components and correct WagmiProvider setup. Our Web3 development experience spans over 5 years, with 50+ integrations for DeFi and NFT projects. Wagmi is the de facto standard for React development on Ethereum. Compared to raw ethers.js, Wagmi cuts development time by 3x and reduces code volume by 60%. Wagmi v2 further halves RPC requests, lowering infrastructure costs. By using Wagmi v2, you can cut RPC costs by 50%, saving hundreds of dollars monthly on infrastructure. Wagmi v2 performs 2x better than v1 in terms of RPC efficiency and memory usage. Request a project assessment — we'll propose the optimal architecture.

Why Choose Wagmi for React Frontends?

Wagmi v2 is the de facto standard for React + EVM. Unlike direct ethers.js or Web3.js usage, Wagmi manages wallet state automatically, updates data on network or account changes, and optimizes RPC requests through TanStack Query. This reduces development time by 3x: where ethers.js requires 100 lines for balance and network management, Wagmi does it in 30. Time savings on each project reach 70% on routine operations. The library also handles network and account switches, updating state without unnecessary re-renders. The result is smooth UX and maintainable code.

How to Set Up Wagmi in 5 Steps

1. Install dependencies: npm i wagmi viem @tanstack/react-query. Note that wagmi v2 requires viem as provider — ethers.js is no longer used.
2. Create configuration in config.ts with multi-chain transports and connectors. Each transport should point to a private RPC — public endpoints often have request limits and cause delays.
3. Wrap the app in WagmiProvider and QueryClientProvider. WagmiProvider must be placed only in the client root to avoid SSR issues.
4. Implement read hooks (useReadContract) with query.enabled to prevent unnecessary requests. Use staleTime and gcTime to control caching.
5. Add write hooks (useWriteContract) with confirmation handling via useWaitForTransactionReceipt. To estimate gas before sending, use useSimulateContract — this prevents unexpected out-of-gas errors.

Configuration and Setup

// config.ts import { createConfig, http } from 'wagmi'; import { mainnet, polygon, arbitrum, base } from 'wagmi/chains'; import { injected, coinbaseWallet, walletConnect } from 'wagmi/connectors'; export const config = createConfig({ chains: [mainnet, polygon, arbitrum, base], transports: { [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'), [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_KEY'), [arbitrum.id]: http('https://arb-mainnet.g.alchemy.com/v2/YOUR_KEY'), [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_KEY'), }, connectors: [ injected(), coinbaseWallet({ appName: 'AppName' }), walletConnect({ projectId: process.env.VITE_WC_PROJECT_ID! }), ], }); 

WagmiProvider wraps the app; QueryClientProvider is required — Wagmi uses it for caching. It's important to pass transports for each chain, otherwise requests go to public RPCs, causing limits and delays.

Core Patterns

Reading Data

useReadContract for a single call, useReadContracts for batch via Multicall3:

const { data: balance } = useReadContract({ address: TOKEN_ADDRESS, abi: erc20Abi, functionName: 'balanceOf', args: [address], query: { enabled: !!address }, }); 

query.enabled is critical: without it, the hook tries to read before address is defined. staleTime and gcTime control how often data is refetched — 30 seconds for balances, 5 minutes for slowly changing contract parameters.

Writing (Transactions)

const { writeContractAsync } = useWriteContract(); const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash }); const handleStake = async () => { const hash = await writeContractAsync({ address: STAKING_ADDRESS, abi: stakingAbi, functionName: 'stake', args: [parseEther(amount)], }); // hash obtained — transaction sent, wait for confirmation }; 

Signing

For SIWE and permit signatures — useSignMessage and useSignTypedData:

const { signTypedDataAsync } = useSignTypedData(); // EIP-712 typed data for permit const signature = await signTypedDataAsync({ domain, types, primaryType: 'Permit', message: permitMessage, }); 

How to Prevent Duplicate Transaction Submissions?

After sending a transaction, wait for its confirmation and invalidate the cache. Use useWaitForTransactionReceipt with onSuccess:

const queryClient = useQueryClient(); useWaitForTransactionReceipt({ hash, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['readContract'] }); }}); 

This prevents duplicate transaction submissions and ensures data freshness on the UI.

Wagmi v1 vs Wagmi v2

Migrating from v1 to v2 is a typical task: we replace dependencies, rewrite config and hooks, and test in Tenderly. The whole process takes 1–2 days.

Deliverables

We provide turnkey integration:

• Multi-chain transport and connector configuration.
• Implementation of all required read/write hooks.
• Auto-signing setup and typed data (EIP-712).
• Transaction testing via Tenderly and simulation in Foundry.
• Documentation and code comments.
• Access to private repositories.
• Training session for your team.
• 30 days of post-deployment support.
• Migration from Wagmi v1 to v2.

All work is backed by a compatibility guarantee with the latest Wagmi and Viem versions.

Timeline Estimates

Setup from scratch (multi-chain, wallet UI, basic read/write hooks): from 1 day. Integration with an existing React app with several smart contracts and migration from v1: 2–3 days. Contact us for a personalized assessment — we'll prepare the architecture and calculate exact timelines. For a typical Wagmi integration, the cost ranges from $500 to $1000 for basic setup, saving $3000 in development time compared to building from scratch.