Day 4 ReactJS Adventures + Distriator Progress: useState, useEffect, and .env Chaos 😹

👋 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: Fresh React app + AIOHA integration!
• 🧭 Day Two: Routing drama & rebellious NavBar 😤
• 🛠️ Day Three: 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)

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:

import.meta.env.VITE_API_KEY

---

🔄 How to Use useState

useState lets you track and update values inside functional components 📦

✅ Step 1: Import it

import { useState } from "react";

✅ Step 2: Declare a variable

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?!”)

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

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 []

useEffect(() => {
  const fetchedData = async () => {
    // some logic to fetch businesses
  }
  fetchedData();
}, []); // Important!

But even then... API was hit twice 😑

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

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

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

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 🚀

☝️ 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
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App

---

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak

---