samclassix
commented
1 month ago These are my discoveries so far
Currently, there are some adverse side-effects associated with fetching data or making API calls within React components. React components should "primarily" focus on rendering and remain detached from such tasks. Whenever React refreshes a component that implements data fetching or API calls, it automatically triggers these actions, leading to potential issues. At a certain scale, Wagmi encountered a '429 Too Many Requests' error response. As a workaround, it switched to the backup service provided by cloudflare-eth.com, attempting to request the same data as before.
We could consider following steps:
- Implement Redux Store - A store holds the whole state tree of your application. (https://redux.js.org/api/store)
- Implement Redux Slices - The state produced by combineReducers() namespaces the states of each reducer under their keys [...] (https://redux.js.org/api/combinereducers#state-slices)
- Remove/Detache data fetching from components and rely on the Redux Store for state rendering
- Each component needs to access the Redux state and refrain from directly pulling data within itself. Transition to global state management rather than component-specific states.
Those changes will eliminate the constant and unnecessary fetching of data, which is highly likely to have remained unchanged.
When might our data have changed?
Given our reliance on the Ethereum blockchain, any relevant changes to our data could occur with each new block.
Wagmi implements a roughly 5sec fetching interval for the latest block height (eth_blockNumber):
{
"jsonrpc": "2.0",
"id": 548, // request id
"method": "eth_blockNumber"
}Component called BlockUpdater
To stay updated with the latest block height changes, let's introduce a new component called BlockUpdater. This component will execute a one-time solution for fetching new block states for the application, employing either a Full Update or Lazy Loading approach.
import { useBlockNumber } from "wagmi";
import { useEffect } from "react";
export default function BockUpdater() {
const {error, data} = useBlockNumber();
useEffect(() => {
if (error) return
console.log(`New block found: ${data}`);
// call redux slice A fetch
// call redux slice B fetch
// call redux slice C fetch
// call redux slice D fetch
}, [error, data])
return <></>;
}Get state from store
Each component requiring access to the Redux store retrieves data from the store or slices using the useSelector hook and object tree parameter. e.g.:
import React from 'react'
import { useSelector } from 'react-redux'
export function Counter() {
const count = useSelector(state => state.counter.value)
...
luziusmeisser
We should move to the latest version of wagmi, monitor the number of requests we are issuing and check with walletconnect why we see this error.
Strangely, our API usage in cloud.walletconnect.com is 0 despite the url having the correct project id in its requests:
It also looks like some requests connect to cloudflare-eth.com, which is the default provider for viem, which is often used in concert with wagmi, but apparently requires its own configuration.