React Hooks Benefits and Mindset Shift

🚀 Today’s Learning Journey in React Today I explored some really cool and important parts of React. Here’s what I learned 👇 • ⚛️ Core React Basics Learned how React works at its core — components, props, and reusable UI. 👉 This helps me understand how to build scalable and clean applications. • 💳 Custom Pricing Card Built my own pricing card from scratch. 👉 Improved my UI thinking and component design skills. • 🎨 DaisyUI Card Component Used DaisyUI to create a clean and modern card. 👉 Learned how UI libraries can speed up development. • 📊 Recharts with Tooltip Created charts with interactive tooltips. 👉 Helped me understand data visualization in React. • 🔗 Axios Learned how to fetch data from APIs. 👉 This is key for building real-world dynamic applications. ✨ Every small step is helping me build a strong foundation in React and move closer to becoming a better developer. #React #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

One mistake I kept making while learning React was overusing useEffect. Any time I needed to update something based on state, my first instinct was: Let’s just add an effect for this. It worked at first… until my components started behaving in weird ways: • state updating twice • unexpected re-renders • and once, an infinite loop that took me way too long to debug That’s when I realised something important: useEffect is not for managing normal component logic — it’s for side effects. Now, before writing an effect, I ask myself: Am I syncing with something outside React, or am I just calculating data? If it’s just data, I compute it directly or use useMemo if it’s expensive. This one small change made my React code: simpler, easier to read, and way less buggy. Still learning, but moments like these really changed how I think about React. #reactjs #javascript #frontend #webdevelopment #reacthooks

🚀 #Optimizing React Performance with #Code_Splitting Ever noticed how large React apps feel slow on first load? That’s usually because everything is bundled into one big file (monolithic bundle). 💡 The solution: Code Splitting with React.lazy and Suspense 🔹 Before: A single large bundle (main.bundle.js) containing all components, routes, and libraries ⏳ Slow initial load (high Time to Interactive) 🔹 After: Split your code into smaller chunks (Profile, Dashboard, Settings) that load only when needed ⚡ Faster load time + better user experience ✅ Key Benefits: Smaller initial bundle size Improved Time to Interactive (TTI) Load components on demand (lazy loading) 🛠️ Best Practices: Split by routes (e.g., using react-router) Split large components (charts, complex forms) Analyze bundles with tools like webpack-bundle-analyzer 📌 Takeaway: Don’t ship everything upfront—load only what your users need. #React #FrontendDevelopment #MERN_STACK #WebDevelopment #JavaScript #ReactJS #Programming #SoftwareEngineering

I know React. I understand state, hooks like useState and useEffect, and how components work. I’ve explored Node.js, APIs, authentication, and even touched real-time features like sockets. I can follow tutorials, understand the logic, and explain what’s happening. On paper, it appears that I have the knowledge to build something meaningful. And still, when I sit down to build something as simple as a small website on my own, my mind just crashes. Not because I don’t know things, but because I try to think everything at once — UI, backend, future features, perfect structure — all before even finishing the first step. Instead of building one small piece, I try to build the whole system in my head, and that’s where everything breaks. The truth is uncomfortable: my problem is not lack of knowledge, it’s my approach. I learned by watching and understanding, but not by building from scratch. So when there’s no tutorial guiding me, I freeze — even on simple things. It’s a strange place to be — knowing so many concepts, yet struggling to create something basic on your own. Perhaps the real struggle isn’t learning more, but learning how to effectively build upon what I already know. #LearningInPublic #BeginnerDeveloper #WebDevelopmentJourney #ReactJS #NodeJS #BuildInPublic #CodingStruggles #DeveloperMindset #SelfTaughtDeveloper #Consistency #KeepBuilding

🎬 I built my biggest React project so far — a Movie App with a funny twist on the legendary EgyBest — after learning React over the past few weeks. I pushed myself to build a real-world, fully functional application as a challenge… and this is the result 👇 🎥 Demo in the video below ✨ Features: • Search for any movie using an API • View detailed movie information • Rate movies ⭐ • Add movies to a watched list • Store data using localStorage • Delete movies from the list 🛠 Tech I used & learned: • React (Components, Props, State) • useState & useEffect • Custom Hooks (built my own reusable logic) • API integration (fetching data) • Conditional rendering • Event handling • Local Storage • Basic CSS for styling 🧠 What I learned: • How to structure a real-world React application • Managing state across multiple components • Persisting data in the browser ⚡ Biggest challenge: • Keeping the watched list synced correctly with localStorage This project is a big step forward for me, and I’m excited to keep improving 🚀 🔗 GitHub: https://lnkd.in/d6Uu-Xr6 I’d really appreciate your feedback 🙌 #ReactJS #ReactDeveloper #FrontendDeveloper #JavaScriptDeveloper #WebDevProjects #BuildInPublic #CodingJourney #JuniorDeveloper

setState does not work as you expect Do you think setState works like this: setCount(1) console.log(count) // should be 1, right? Wrong. It's still 0 (or the prev value). And if you don't understand WHY... You'll spend hours debugging something that isn't even a bug. This is Post 6 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what's actually happening 👇 setState doesn't update state. It queues a request to React. React then decides WHEN to process it. Not your code. React. That's why the value after setState is still the old one... because the component hasn't re-rendered yet. Now here's where it gets interesting. Call setState 3 times in one click? You'd expect 3 re-renders. React does it in 1. That's called Batching React's built-in performance superpower. It groups all your updates, processes them together, and re-renders once. But batching also leads to one of the most confusing bugs beginners face: setCount(count + 1) setCount(count + 1) // Expected: 2 // Actual: 1 😐 Both calls read the SAME stale snapshot of count. So React queues the same value twice. How to fix this? setCount(c => c + 1) setCount(c => c + 1) // Now it's: 2 ✅ Functional updates always get the latest queued value, not the stale snapshot. One tiny change in how you write setState. Massive impact on how your app behaves. Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: Using index as key is dangerous in list: https://lnkd.in/dPQyScAT #ReactJS #JavaScript #WebDevelopment #Frontend #BuildInPublic #LearnInPublic #ReactUnderTheHood #FrontendDeveloper #Programming #TechStudent

If you're learning React and still confused about hooks… You're not alone. 👉 A lot of people know how to use hooks, but not when to use them. And that’s where things start going wrong. Here are 5 React hooks that actually matter 👇 🔹 useState Manages component state and triggers re-render when data changes. Used in almost every app , but overusing it can make your logic messy. 🔹 useEffect Handles side effects like API calls and external updates. Most misused hook , bad dependencies = bugs + performance issues. 🔹 useRef Stores values without causing re-renders and accesses DOM directly. Super useful for focus control, timers, and tracking previous values. 🔹 useContext Removes prop drilling by sharing data across components. Great for global state , but don’t treat it like a full state manager. 🔹 useNavigate Controls navigation programmatically inside your app. Commonly used for redirects after login, logout, or form actions. --- Here’s the truth 👇 React isn’t hard. Bad understanding of hooks is. Stop memorizing. Start building. 💬 Which hook confused you the most when you started? #ReactJS #FrontendDeveloper #JavaScript #MERNStack #WebDevelopment #Coding #LearnInPublic

Day 6 — React hooks are either magic or terrifying, depending on the day. Today: mostly magic. useEffect finally makes sense to me. It's for things that happen outside the React world — API calls, timers, subscriptions. The dependency array is not optional. I learned that the hard way with an infinite loop at 11pm. Built a custom hook today — useFetch — that handles loading, error, and data states. Reused it in two components. That reusability feeling is something else. useRef was a surprise. I thought it was just for accessing DOM elements. Turns out it's also for keeping values across renders without triggering re-renders. Subtle but powerful. useMemo and useCallback: don't reach for them immediately. Optimise when you actually have a problem. What hook tripped you up the most when learning React? #reactjs #hooks #webdevelopment #frontenddeveloper

If I had to learn React from scratch in 2026, here's exactly what I'd do. Week 1-2: JavaScript FIRST Don't touch React yet. Master: Array methods, destructuring, spread operator, arrow functions, async/await Why: 80% of React confusion = JavaScript confusion Week 3-4: React basics only Build 3 simple projects: - Counter app - Form with validation   - Fetch API data Learn: Components, Props, useState, useEffect Stop here. Master these first. Week 5-6: One real project Build a dashboard with real API integration, loading states, and routing. This becomes your portfolio anchor. Week 7-8: Level up Add one at a time: - React Router - Custom hooks - Context API Month 3+: Build, build, build Stop tutorials. Clone real apps. Share your progress. **What to skip initially:** ❌ TypeScript ❌ Next.js ❌ Redux ❌ Testing Learn React first. Add these when you understand WHY you need them. The biggest mistake: Trying to learn React, TypeScript, Next.js, and Redux all at once. You end up overwhelmed. The solution: Master React. Then add layers. One thing at a time = faster progress. If you're learning React, what's your biggest struggle? 👇 #React #WebDevelopment #JavaScript #Frontend #LearningToCode

Mastering React State with Hooks Ever felt like your React components are getting cluttered with too much state logic? Here’s a simple idea that can seriously clean things up: Custom Hooks What’s the big deal? Custom hooks let you extract and reuse stateful logic across components. Instead of repeating the same `useState` and `useEffect` logic everywhere, you write it once—and reuse it. Can they really halve your code? In many cases… YES. Imagine this: Instead of writing the same logic in 5 components, you move it into a custom hook like `useFetchData()` or `useFormHandler()`. Now you: Reduce duplication Make components cleaner Improve readability Make debugging easier Simple Example Before: Each component handles its own API call logic After: One custom hook handles everything Components just use it Why you should start using them Keeps your code DRY (Don’t Repeat Yourself) Makes scaling your app easier Encourages better structure Pro Tip Start small. Pick one repeated logic (like form handling or API calls) and convert it into a custom hook. #React #WebDevelopment #Frontend #JavaScript #Coding #SoftwareDevelopment