React Mistakes: Using Index as Key in Lists

Today I revisited an important concept in React.js — the Component Lifecycle. Understanding the lifecycle of a component is essential for writing efficient and maintainable React applications. Every React component goes through a series of phases during its lifetime. Key Lifecycle Phases: • Mounting – When the component is created and inserted into the DOM. • Updating – When the component re-renders due to changes in state or props. • Unmounting – When the component is removed from the DOM. In traditional Class Components, lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount were used to manage these phases. With Functional Components and React Hooks, particularly useEffect(), managing lifecycle-related logic has become simpler and more readable. Mastering the React lifecycle helps developers: ✔ Handle side effects like API calls ✔ Optimize component performance ✔ Write cleaner and more predictable code Learning React is not only about building components, but also about understanding how they behave throughout their lifecycle. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactLifecycle #ReactHooks #SoftwareEngineering #LearningInPublic

🚀 React Hooks Small Projects I recently worked on a few small projects to better understand some important React Hooks. In this video, I demonstrated how these hooks work with simple examples so that beginners can easily understand their usage. 🔹 useState – Used to manage state inside a functional component. It helps update and display dynamic data in the UI. 🔹 useEffect – Used to handle side effects in React applications such as API calls, timers, and updating the DOM when state changes. 🔹 useContext – Helps share data globally across components without passing props manually through every level. 🔹 useReducer – A powerful hook for managing complex state logic, especially when multiple state updates depend on different actions. 🔹 useMemo – Optimizes performance by memoizing expensive calculations so they only run when dependencies change. 🔹 useCallback – Returns a memoized function to prevent unnecessary re-renders when passing functions to child components. These mini projects helped me strengthen my understanding of React Hooks and component optimization techniques. 📌 If you watch the video, you can easily understand how each hook works in a practical way. #ReactJS #ReactHooks #WebDevelopment #MERNStack #JavaScript #FrontendDevelopment #CodingPractice

Day 7/15 – Mastering React Custom Hook Pattern 🚀 Today I focused on the Custom Hook Pattern in React. Custom Hooks allow us to extract and reuse stateful logic across multiple components while keeping components clean and focused on UI. Instead of repeating the same logic (like API calls, form handling, or event listeners), we can move that logic into a custom hook and reuse it anywhere in the application. Key takeaway: Custom Hooks improve code reusability, readability, and separation of concerns, which is essential for building scalable React applications. Learning to design good hooks is a big step toward writing clean, production-ready React code. #React #CustomHooks #FrontendDevelopment #JavaScript #ReactPatterns #LearningInPublic

Today I learned how useEffect cleanup actually works in React — and it completely changed how I think about side effects. When we use useEffect, it runs after render. But what many beginners ignore is the cleanup function. Why is cleanup important? Prevents memory leaks Stops unnecessary API calls Removes event listeners properly Clears intervals and timeouts Example: When you add an event listener inside useEffect, you must remove it when the component unmounts. Otherwise, it keeps running in the background. That’s where cleanup comes in. useEffect(() => { const handleResize = () => console.log("Resized"); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); The function returned inside useEffect runs: Before the next effect runs When the component unmounts Small detail. Big difference in performance. React is simple — until you understand the details. #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

Want to learn more about React hooks? I recently stumbled upon BigFrontEnd.dev and have been really enjoying it. I’ve been spending some time in the React section, which has exercises where you predict what gets printed to the console when using React hooks. It’s been a great way to better understand how state updates work, when React re-renders a component, and how closures can affect values inside hooks. They also have a solid JavaScript section. I started exploring those to get a better feel for what actually gets logged when you combine things like console.log, setTimeout, and Promises. It’s been helpful for reinforcing how JavaScript handles execution order and the event loop. If you’ve been wanting to dig a little deeper into React hooks or brush up on JavaScript behavior under the hood, I highly recommend it Please let me know if there are any other great resources you use as well. #react #reacthooks #state #javascript

REACT NOTES — PART 1 (Foundations) After understanding how JavaScript works, the next step is building interfaces that scale. React simplifies complex UIs by breaking them into small, reusable components. This post covers the core foundations: • Components and component structure • JSX and how React renders UI • Virtual DOM and efficient updates • Props for passing data • State for dynamic UI behavior • Event handling in React Before learning advanced patterns or frameworks, these fundamentals must be clear. 📌 Save this if you're starting with React or revising the basics. #React #FrontendDeveloper #WebDevelopment #JavaScript #InterviewPrep #LearningInPublic #Consistency

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 15/30 I changed the state… but the input field didn’t update 😐 <input defaultValue={name} /> `defaultValue` only sets the initial value. After that, the DOM controls the input — not React. So even when state changed, UI didn’t. Fix 👇 <input value={name} onChange={e => setName(e.target.value)} /> Now React state controls the input. In React: Uncontrolled input → unpredictable Controlled input → reliable Day 16 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

Today I learned about the useRef hook in React, and it’s actually very useful! What is useRef? It allows us to create a reference that persists across renders without causing re-renders. Key Uses: Access DOM elements directly Store mutable values without re-rendering Useful for focus, timers, and previous values Example: import { useRef } from "react"; function InputFocus() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus Input</button> </> ); } What I learned: Unlike state, updating useRef does NOT trigger a re-render. Excited to explore more React hooks! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #90DaysOfCode

A well-structured project isn’t just about clean code — it’s about thinking like a professional developer. When working with React, organizing your file structure properly can make your application more scalable, maintainable, and easier to collaborate on. Here’s a simple mindset shift that helped me: 📁 Keep components reusable and isolated 📁 Separate logic, UI, and API calls 📁 Use folders like components, pages, hooks, services, and utils 📁 Follow consistency across the project Good folder structure = better readability + faster development + easier debugging. As projects grow, structure becomes more important than code itself. 💡 Don’t just write code — organize it like a pro. #ReactJS #WebDevelopment #FrontendDevelopment #CleanCode #JavaScript #DeveloperJourney