Understanding useReducer in React

Unpopular opinion: useEffect is one of the most misused hooks in React. Most codebases I've worked in fall into the same traps: → Syncing state that could just be derived → Triggering logic that belongs in an event handler → Creating infinite re-render loops nobody wants to debug at 2am The real rule is simple: useEffect is for syncing with external systems — browser APIs, network requests, third-party widgets. That's it. If you're using it to watch one state variable and update another — that's a sign your state model needs a rethink, not another effect. Cleaner effects = easier to reason about = fewer production bugs. Spotted this on X via @alexdanilowicz — and it resonated #React #JavaScript #WebDevelopment #Frontend

🚀 Master React Router in Minutes! Here’s a simple breakdown of everything you need to know: ✅ What is Routing ✅ SPA Concept ✅ Static vs Dynamic Routes ✅ useParams() ✅ Protected Routes 💡 Key Takeaways: React uses SPA (Single Page Application) Routing helps display components based on URL Dynamic routes make apps scalable Protected routes secure your app 📌 If you're learning React, this is a must-know concept! Let me know in comments 👇 What topic should I cover next? #React #WebDevelopment #Frontend #JavaScript #ReactJS #Coding #LearnToCode

🚀 Day 9/30 – Mastering useEffect in React Most beginners use useEffect… But very few actually understand it properly 👀 Today I fixed that. ⚡ What is useEffect? 👉 It’s how React handles side effects (Things that happen outside the UI logic) Think: • API calls 🌐 • Timers ⏱️ • Event listeners 🎧 🧠 The Real Flow (Important): 1️⃣ Component renders 2️⃣ DOM updates 3️⃣ useEffect runs AFTER render 👉 That’s why you should NEVER put side effects directly in render 💡 Dependency Array = Game Changer • [] → Runs only once (on mount) • [value] → Runs when value changes • No array → Runs on every render ⚠️ 💻 Example: useEffect(() => { console.log("Component Mounted"); }, []); 🔥 Real Power = Cleanup Function useEffect(() => { const timer = setInterval(() => { console.log("Running..."); }, 1000); return () => clearInterval(timer); }, []); 👉 Prevents memory leaks 👉 Keeps your app performant ⚠️ Common Mistake I used to make: Forgetting dependency array → Infinite re-renders 😵 🔥 Key Takeaway: useEffect is NOT just a hook… It’s the bridge between React & the real world 🌍 💬 Be honest: Do you actually understand useEffect or just copy-paste it? #ReactJS #UseEffect #Hooks #WebDevelopment #Frontend #JavaScript #CodingJourney #LearnInPublic

🎌 MyAnimeList Dashboard - React/Tailwind Github : https://lnkd.in/gCbm4FSC As part of my journey learning React, I built a personal anime tracking dashboard that connects to the real MyAnimeList API. 𝗪𝗵𝗮𝘁 𝗜 𝗯𝘂𝗶𝗹𝘁: -> OAuth 2.0 PKCE authentication flow from scratch -> Anime list with status tabs, counts and genre filtering -> Anime detail modal with synopsis, scores and watch dates -> Stats page with status breakdown chart -> Skeleton loading cards and smooth animations -> Fully responsive design 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱: -> How OAuth 2.0 PKCE works and why it matters for frontend apps -> Working with real third party APIs and handling CORS -> React component architecture and state management -> Deploying with Vercel and managing environment variables MyAnimeList Profile : https://lnkd.in/gTbf6-Hh #WebDevelopment #JavaScript #Frontend #MyAnimeList #OpenSource #ReactJS #React #Anime #Dashboard #TailwindCSS #WebDev #OAuth

Most developers think React components only re-render when props change. I used to believe the same — until I learned something surprising. A component re-renders whenever its parent re-renders, even if the props stay exactly the same. That means a small state update in a parent component can trigger multiple unnecessary renders in child components. One simple optimization that helped me: Using React.memo to prevent unnecessary re-renders. It’s a small change, but in large applications it can improve performance significantly. Still exploring more about how React’s rendering works under the hood. Curious — what’s one React concept that took you a long time to fully understand? #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #SoftwareEngineering

What I Learned Today: Routing in React Today I learned how routing works in React and how we can navigate between different pages without reloading the browser 🔥 Key Concepts I Explored: 1. BrowserRouter – Enables routing across the entire application 2. Routes – Acts as a container for multiple routes 3. Route – Maps a specific URL path to a component 4. Navigation using useNavigate() and Link 🎯 This helped me understand how real-world applications handle navigation smoothly and efficiently. * I also implemented this in my project: * Created a Home page * Added navigation to a Weather page using React Router Learning something new every day and building step by step! #ReactJS #ReactRouter #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #100DaysOfCode

💡React 19/Next.js Tip💡 Supercharge your forms with the useActionState hook! React 19 introduces a powerful new hook called useActionState that simplifies form handling and validation. This hook manages form state, handles submissions, and provides an easy way to implement real-time validation, all while keeping your components clean and readable. Key features: • Built-in form state management • Simplified form submissions • Easy integration with server actions Say goodbye to complex form logic and hello to cleaner, more efficient React forms! 🚀 𝗣𝗦: This video is from my Next.js 15 course, link in the comment. 𝗙𝗼𝗿𝗲 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

Have you ever heard about these React Hooks? -useImperativeHandle -forwardRef Imagine a child component has many things inside it, but you only want to let the parent control one or two things (like focusing an input or triggering a method). You can use useImperativeHandle to expose only those things to the parent. When you use useRef or ref directly in a component, you get access to the entire instance of the component, which might expose more than you need. This can lead to poor encapsulation, where the parent component can access and potentially modify internal state or methods that it shouldn't. useImperativeHandle combined with forwardRef allows you to control what’s exposed to the parent component. You can limit access to only specific methods or properties, keeping your component's internal logic private. #SoftwareEngineering #ReactJs #NextJs #FrontendEngineer

While building React projects, I realized that form handling is one of the most important concepts to master. Almost every application needs forms — login, signup, feedback, search. Here are 4 ways I learned to handle forms in React: 1️⃣ Controlled Components → Using useState to manage input values 2️⃣ Uncontrolled Components → Using useRef to access input directly 3️⃣ Single State Object → Managing multiple inputs with one state 4️⃣ Form Libraries → Using React Hook Form / Formik for scalability The biggest learning for me: 👉 Controlled components give more control 👉 Libraries save time in large applications Still exploring and building more projects 🚀 #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney

I’ve made these mistakes in React… and they cost me time. ⚛️ Early in my projects, I didn’t realize how small issues could slow everything down: • Too much prop drilling • Missing memoization • Messy folder structure Things worked at first… but scaling became painful. Over time, I learned: Fixing these early makes your app easier to scale and maintain. Are you making any of these mistakes in your React apps? 👇 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #MERNStack