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

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak