React vs Vanilla JS: Day 42 of 100

Most React developers are writing useEffect wrong. Not because they don't understand it. Because they think they do. After 3 years of building React apps here's what I've learned the hard way: ❌ You don't need useEffect to derive state. ❌ You don't need useEffect to sync two pieces of state. ❌ You definitely don't need useEffect to handle a user event. useEffect is for syncing React with something OUTSIDE React. That's it. That's the rule. When I first started, I put everything in useEffect. Fetch calls. Transformations. Even click handler logic. The bugs were subtle. The re-renders were endless. And the codebase became a nightmare to debug. The fix? Think before you reach for it. Ask yourself: "Am I escaping React, or am I fighting it?" If you're fighting it — useMemo, useCallback, or plain derived variables will serve you better. React is not hard. But undisciplined useEffect usage will make it feel that way. Drop a 🔁 if you've fallen into this trap before. And follow for more no-fluff React breakdowns 👇 #ReactJS #FrontendDevelopment #JavaScript #WebDev #ReactHooks #SoftwareEngineering

I wish someone told me this when I started with React… A few months into building apps, I thought I was doing everything right. Components were working. UI looked fine. Features were shipping. But under the hood? It was a mess. Random bugs. Re-renders I couldn’t explain. Code that worked… until it didn’t. That’s when I realized, React isn’t hard. Bad practices are. Here are some “DON’Ts” that completely changed how I write React: => Don’t mutate state directly, I used to push into arrays and wonder why UI didn’t update properly. => Don’t use index as key, Everything looks fine… until you reorder items and chaos begins. => Don’t create functions inside render unnecessarily, Small mistake, big performance issues in large apps. => Don’t build huge components If your component feels like a novel, it’s already a problem. => Don’t ignore dependency arrays This one silently creates bugs that are painful to debug. => Don’t over optimize early, Using useMemo/useCallback everywhere doesn’t make you smart, just complex. => Don’t skip error handling, Everything works… until the API fails. => Don’t ignore folder structure, Scaling a messy project is a nightmare. Clean React code isn’t about writing more. It’s about avoiding mistakes. If you’re learning React right now, save this, it’ll save you hours. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #DeveloperTips #ProgrammingLife #DevCommunity #BuildInPublic #FullStackDeveloper #CodeQuality #LearnInPublic

I Finally Understood useEffect… Somehow A few days deeper into React, and things are starting to click, not perfectly, but enough to feel real progress. At first, hooks felt confusing. Especially useEffect. Why does it run? When does it run? Why does it run again? It didn’t make sense… until I stopped overthinking it and started building. Here’s what I’ve worked on so far: -> useState Understanding how state drives UI changes made everything feel more dynamic and controlled. -> useEffect Still not “mastered”, but now I understand how it handles side effects, especially API calls and controlled execution. -> Built small apps Counter app (state updates, re-rendering) Meme generator (API hit using useEffect, dynamic content, event handling) These small builds did more than tutorials ever could, they forced me to connect the dots. The biggest shift? I have stopped trying to memorize React… and started trying to think in React. Still early, but now it feels like direction instead of confusion. Next: Better structure, deeper hooks, and more real-world projects. For developers: How do you clearly decide when to use useEffect, and when not to? #ReactJS #FullStackDeveloper #WebDevelopment #BuildInPublic #JavaScript #LearningJourney

🚀 I thought I was optimizing my React app… but I was actually wasting time 😅 In my React projects, I used to spend a lot of time on performance optimization: 🔹 "useMemo" 🔹 "useCallback" 🔹 "React.memo" I thought this was the “right way”. But recently, I learned about the React Compiler. It can automatically handle many optimizations that we used to do manually. That made me realize… 👉 I was spending too much time optimizing things that React can handle for me. --- 🔹 What I learned React is evolving. With the compiler: 👉 Many unnecessary re-renders can be optimized automatically 👉 Less need for manual memoization in many cases But this doesn’t mean we stop thinking as developers. --- 🔹 What still matters We still need to focus on: 👉 Code splitting 👉 Lazy loading 👉 Following React best practices 👉 Writing clean and predictable components And most importantly: 👉 Following React rules properly --- 🔹 Reality check The React Compiler is still evolving and improving, so it’s important to understand where it helps and where manual optimization is still needed. So we should: 👉 Understand optimization concepts 👉 Use tools like React DevTools to analyze performance 👉 Apply manual optimization only when needed --- 💡 My takeaway 👉 Don’t over-optimize early 👉 Understand the problem first 👉 Keep learning and stay updated Because in tech: 👉 What worked yesterday may change today Still learning and improving 💻 How do you approach performance optimization in React? 👇 #ReactJS #FrontendDevelopment #WebDevelopment #PerformanceOptimization #JavaScript #LearningJourney #DeveloperMindset

Day 15 #100DaysOfCode 💻 Today I learned how to set up React in VS Code and understood the basic idea of React Components. First, I installed React using Vite and ran the project in VS Code. Then I learned that in React, a function can act as a component and can be used like an HTML tag. Example: function Header() { return <h1>Hello React</h1>; } function App() { return ( <div> <Header /> </div> ); } This means React allows us to build reusable UI pieces using functions. Small step, but an important start in my React journey 🚀 #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #Akbiplob

🚀 Day 1 Getting Started with React: Download & Components Guide Today I learned how to set up React and create components 👇 🔽 1. How to Download & Set Up React? - First, install Node.js from the official website (nodejs.org) - Then open terminal and run: 👉 "npm create vite@latest" - Select React and JavaScript - Move into project folder: 👉 "cd myapp" - Install dependencies: 👉 "npm install" - Run the project: 👉 "npm run dev" 🌐 Open in browser: "http://localhost:5173" --- ⚛️ 2. How to Create Components in React? Components are reusable UI blocks 👉 Example: function Hello() { return <h1>Hello World 🚀</h1> } 👉 Use it like this: function App() { return ( <> <Hello /> <Hello /> </> ) } ✨ This will display the same component multiple times --- 💡 Key Learnings: - React setup is easy with Vite - Components make code reusable and clean 📌 Conclusion: Learning React step by step makes development simple and powerful 💯 #ReactJS #NodeJS #WebDevelopment #JavaScript #Frontend #Coding #LearningJourney #Developers

If you’ve been working with React for a while, you’ve probably been through this: At first, everything feels magical. Components, hooks, state… you feel like you’re on top of the world. Then suddenly… BOOM 💥 Your project grows and turns into chaos. Props being passed through 5 levels, duplicated state, useEffect hacks everywhere… and you start thinking: “where did I go wrong?” 🤡 But the truth is: this is part of the process. Just like learning a new language or studying system design, there’s always a phase where everything feels confusing before it finally clicks. So here are some tips I learned (the hard way 😅) while working with React: 1️⃣ Less is more (for real) Not everything needs state. If you can derive it, DERIVE it. Unnecessary state is one of the biggest sources of bugs. 2️⃣ Componentization with purpose Breaking everything into small components is good… but without context, it becomes a mess. A good component solves a clear problem. 3️⃣ useEffect is not “do everything here” If you’re using useEffect to control your app’s flow… something is probably wrong. It’s for side effects, not your main logic. 4️⃣ Global state is not a magic solution Before jumping into Context or Redux, try solving things locally. A lot can be handled with lifting state + well-structured props. 5️⃣ Readability > “smart code” Good code is code that another dev can understand quickly (or you in 3 months 😅). At the end of the day, React isn’t hard… But writing GOOD React is a different story. And like any skill: consistency > hype 🚀

🧠 Today I learned something powerful in React: Zustand As I continue building my frontend skills, I explored a lightweight state management library called Zustand — and honestly, it changed the way I think about managing state in React apps. Before this, I mostly used useState and props drilling, which works fine for small apps. But when the app grows, sharing state between components becomes messy and hard to maintain. That’s where Zustand comes in. 🚀 What I learned about Zustand: It allows you to create a global state store outside components Any component can access or update the state directly No need for Context Provider or complex Redux setup Clean, minimal, and very easy to use 💡 Simple idea that helped me understand it: Instead of passing data through components → Zustand keeps the data in one shared store that every component can use directly. This made my code: ✔ Cleaner ✔ More scalable ✔ Easier to manage I really enjoy discovering tools like this because they show me how real-world React applications are structured. Still learning, still building, and getting better every day 💻 #ReactJS #Zustand #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic

𝐁𝐢𝐠𝐠𝐞𝐬𝐭 𝐑𝐞𝐚𝐜𝐭 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐌𝐢𝐬𝐭𝐚𝐤𝐞𝐬 𝐈 𝐌𝐚𝐝𝐞 🚨 When I started working with React, my apps worked… but they were slow 😓 Here are some mistakes I made (and learned from) 👇 ❌ Re-rendering everything unnecessarily I didn’t understand how React re-renders work ✔ Fix: Used React.memo and better component structure ❌ Using useMemo/useCallback everywhere Thought more optimization = better performance ✔ Fix: Used them only where needed ❌ Keeping state at top level One state change → entire app re-render ✔ Fix: Moved state closer to where it’s used ❌ Using index as key in lists Worked fine… until bugs appeared ✔ Fix: Used unique and stable keys ❌ Ignoring large component size Big components = harder to optimize ✔ Fix: Broke them into smaller reusable components ❌ Not measuring performance I was guessing instead of checking ✔ Fix: Used React Profiler and DevTools 💡 Biggest learning Performance issues are not about React being slow They are about how we use React Tip for developers ⚠️ Don’t try to optimize everything Understand the problem first Good developers make things work. Great developers make them fast. 🚀 #ReactJS #FrontendDeveloper #WebDevelopment #JavaScript #Performance #ReactOptimization #SoftwareDeveloper #CodingLife

Your React app is slow. Here's why. 🐢 Most devs jump straight to optimization tools. But 90% of the time, the fix is simpler: 🔴 Fetching data in every component independently → Lift it up or use a global state solution 🔴 Importing entire libraries for one function → `import _ from 'lodash'` hurts. Use named imports. 🔴 No lazy loading on heavy routes → React.lazy() exists. Use it. 🔴 Images with no defined size → Layout shifts kill perceived performance 🔴 Everything in one giant component → Split it. React re-renders what changed, not what didn't. Performance isn't magic. It's just not making avoidable mistakes. Save this for your next code review. 🔖 #ReactJS #Frontend #WebPerformance #JavaScript #WebDev