## 👋 Hello Hive Community!

Another day, another ReactJS rollercoaster! 🎢  
We've been deep-diving into ReactJS while pushing progress on **Project Distriator** and **CheckInWithXYZ** 💪

Let’s rewind ⏪ what we’ve covered so far:

- [📚 **Day One**](https://peakd.com/hive-139531/@sagarkothari88/integrate-aioha-with-your-react-app-from-scratch-vite--tailwind--daisyui): Fresh React app + AIOHA integration!
- [🧭 **Day Two**](https://peakd.com/hive-139531/@sagarkothari88/integrating-react-router-my-routing-adventures-with-react): Routing drama & rebellious NavBar 😤
- [🛠️ **Day Three**](https://peakd.com/hive-139531/@sagarkothari88/from-navbar-mess-to-react-router-success-fixing-layouts-routing-and-aioha-in-one-go): Fixed Layouts, Routing & AIOHA 💥
- **Today is Day Four** 🚀

---

## 🎯 **Today's Goals**

1. Learn to integrate `.env` in React project 🔐  
2. Implement first `useState` 🎛️  
3. Try out `useEffect` (and totally freak out a little) 😵  
4. Share Distriator project updates 📈

---

## 🔑 **How to Load `.env` Values in React (Vite-based)**

![dot env reference image](https://i.ytimg.com/vi/EQ3Htw6Z0PY/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLCGOHWuykdU1G3R1JOeaub6K74Bng)

If you're using **Vite + React** like us, it's super simple 👇

🗂️ **Step 1:** Create a `.env` file  
🛑 Don’t forget to put it inside `.gitignore`

✨ Prefix all variables with `VITE_`, like:
```
VITE_API_KEY=some_key_here
```

🔓 Access it in your app like this:
```js
import.meta.env.VITE_API_KEY
```

---

## 🔄 **How to Use `useState`**

![setState example image](https://media.geeksforgeeks.org/geeksforgeeks/ReactJSsetState/ReactJSsetState20240516120902.jpg)

`useState` lets you track and update values inside functional components 📦

✅ **Step 1:** Import it  
```js
import { useState } from "react";
```

✅ **Step 2:** Declare a variable  
```js
const [businesses, setBusinesses] = useState([]);
```

In **Distriator**, we're tracking a list of businesses – so we start with an empty array.  
- `businesses`: current value  
- `setBusinesses`: to update the state

Simple & elegant 😎

---

## 🌀 **How to Use `useEffect` (AKA: “Why is my API Calling TWICE?!”)**

![useEffect Reference image](https://cdn.hashnode.com/res/hashnode/image/upload/v1647881187162/1kwBlLb3S.png)

Okay... so this one had me like 😵‍💫  
I initially wrote:

```js
useEffect(() => {
  const fetchedData = async () => {
    // some logic to fetch businesses
  }
  fetchedData();
});
```

💣 **Result:** Infinite reload loop! App was like: "I LIVE TO FETCH!"  
I panicked, closed the app, went into full bug-hunting mode 🕵️

### 🧠 The Fix?

I forgot the **dependency array `[]`**  
```js
useEffect(() => {
  const fetchedData = async () => {
    // some logic to fetch businesses
  }
  fetchedData();
}, []); // Important!
```

But even then... API was hit **twice** 😑

![Two times API calls](https://files.peakd.com/file/peakd-hive/sagarkothari88/Eo6CEL9ixHv5GecuSbDM9jj5PBXGYF7eD1Vt4g6SeG6G8ukrB31DArDi4Ek1UNensXi.png)

![Screenshot 2025-07-29 at 5.43.52 AM.png](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tRvE4uy1W6zpYpSHnrJ7iivEaYbHN75GtaVZ4scCUqfQ62c5LiEkV44t3kH22errmQv.png)

🎯 **Removing `StrictMode` is a fix...**  
But let’s be real – not the best one!

![controller](https://i.ytimg.com/vi/QQYeipc_cik/maxresdefault.jpg)

Turns out, the smarter way is to use **AbortController** to clean up async functions.

And yeah... it’s a bit weird. 👇

![weird](https://media.tenor.com/kQNVHSi5J50AAAAC/funny-meme.gif)

Let’s move on before I rage-quit 🙃

---

## 🏨 **Distriator Project Updates**

Big win on Distriator today! 🎉  
We’ve successfully integrated **all rooms of Ati Hotel** 🛏️  
Deployment is live at: **[alpha.distriator.com](https://alpha.distriator.com)** 🚀

![Distriator Changes](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t74pH5oekzqfca8GGinMTjgcy5GumoDCmUFKfvaLmLpFGcjSvEj9rHCg6GaPDckVdQ1.png)

☝️ Screenshot above highlights just **one file’s worth** of changes, but the impact is massive!

Tagging @ecoinstant & @starkerz so you guys can start playing around on the alpha site!

---

## 🙏 Thanks for Following Along!

I’ll be back soon with more learnings, bugs, laughs & updates.  
Until then — keep building, keep shipping! 💻✨

**See you in the next post!** 🚀

---

### 📝 Final Note

- I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
- Here is the link where you can find both original content & improvements made by AI
- https://chatgpt.com/share/6888bbac-21dc-8000-ba70-26940b53cfe7

---

### 🚀 My Contributions to ♦️ Hive Ecosystem

| Contribution | To | Hive | Ecosystem |
|--------------|----|------|-----------|
| Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | [Distriator Developer](https://distriator.com/) |
| [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) |

---



### 🙌 Support Back

❤️ **Appreciate my work? Consider supporting @threespeak & @sagarkothari88!** ❤️

| Vote | For | Witness |
|------|-----|---------|
| [![](https://images.hive.blog/u/sagarkothari88/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 |
| [![](https://images.hive.blog/u/threespeak/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |

---