diff --git a/agenta-web/README.md b/agenta-web/README.md
index 97ae519f3e..56a3ab457e 100644
--- a/agenta-web/README.md
+++ b/agenta-web/README.md
@@ -104,10 +104,10 @@ agenta-web/src
│ │ │ ├── Module2UIElement.tsx
│ │ ├── components
│ │ │ ├── ModuleComponent1.tsx
-│ │ ├── hooks
+│ ├── hooks
│ │ │ ├── useModuleHook1.ts
-│ │ ├── Module.tsx
-│ │ ├── types.d.ts
+│ ├── Module.tsx
+│ ├── types.d.ts
└── global.d.ts
```
@@ -176,3 +176,80 @@ This structure supports:
- Identification of reusable patterns
- Natural code organization based on usage
- Scalable architecture that grows with the application
+
+### Data Fetching Best Practices
+
+We recommend using SWR with Axios for data fetching instead of useEffect patterns. This helps achieve cleaner code while simplifying management of fetch states.
+
+#### Example: Converting useEffect Data Fetching to SWR with Axios
+
+❌ **Avoid this pattern:**
+
+```javascript
+useEffect(() => {
+ fetchData1().then(data1 => {
+ setData1(data1);
+ }).catch(error => {
+ setError1(error);
+ });
+
+ fetchData2().then(data2 => {
+ setData2(data2);
+ }).catch(error => {
+ setError2(error);
+ });
+}, []);
+```
+
+✅ **Use this pattern:**
+
+We configure SWR globally with our pre-configured Axios instance:
+
+```javascript
+// src/utils/swrConfig.js
+import axios from '@/lib/helpers/axios';
+import useSWR from 'swr';
+
+const fetcher = url => axios.get(url).then(res => res.data);
+
+export const swrConfig = {
+ fetcher,
+};
+```
+
+To ensure SWR configuration is applied globally, wrap your application with SWRConfig in `_app.tsx`:
+
+```javascript
+// src/pages/_app.tsx
+import { SWRConfig } from 'swr';
+import { swrConfig } from '../utils/swrConfig';
+
+function MyApp({ Component, pageProps }) {
+ return (
+