Smeet Gadhiya’s Post

🚀 30 Days — 30 React Mistakes Beginners Make 📅 Day 4/30 ❌ Mistake: Making Input Controlled Without onChange I wrote this 👇 <input value={name} /> Input stopped typing 😐 💡 Why? When you pass value, React controls the input. But without onChange, it becomes read-only. React says: “If I control it, you must update it.” ✅ Correct Way <input value={name} onChange={(e) => setName(e.target.value)} /> 🎯 Lesson If you use value, always handle onChange. Controlled component = state-driven input. #ReactJS #JavaScript #FrontendDev #WebDevelopment #CodingProblems #ReactHooks #DevTips #ProgrammingLife #TechLearning #UIEngineering

One thing I often notice while learning and working with React is that many beginners only focus on the most common hooks like useState and useEffect. They see other hooks but usually just go through them quickly without understanding their real purpose. However, React provides many hooks and each of them solves a specific problem. Ignoring them means missing powerful tools that can make your code cleaner and more efficient. For example, instead of managing too many states inside a component with multiple useState calls, you can use useReducer to manage complex state logic in a more organized way. Similarly, useRef is very useful when you want to persist a value without causing a re-render or when you need to access a DOM element directly. For instance, you can use useRef to focus an input field automatically when a component loads. Hooks like useMemo and useCallback help optimize performance by preventing unnecessary calculations and function recreations in larger applications. And in routing scenarios, useNavigate makes navigation between pages simple and programmatic. The key point is: if you want to become strong in React, it's important not to just memorize hooks but to understand when and why they should be used. Once you start understanding the real use cases of these hooks, your code becomes more structured, efficient, and scalable. #React #WebDevelopment #FrontendDevelopment #JavaScript #ReactJS

Day 72 / 365 👨💻 Continued learning React today. 🧠 Understood what React actually is 🔗 Learned what ReactDOM does ⚖️ Compared React vs ReactDOM 🧱 Looked at why they’re separate (native, PDF, etc.) ⚙️ Tried building a simple custom ReactDOM renderer 🚀 Learned about React 18 createRoot rendering ✨ Saw why JSX becomes useful #365DaysOfCode #React #JavaScript #Frontend

⚛️ Day 10 of Learning React.js Today I learned about Hooks in React.js. I understood that Hooks allow us to use state and other React features inside functional components. Earlier, state was mainly used in class components, but Hooks make functional components more powerful and flexible. What I learned today: What are Hooks in React Why Hooks are used Basic idea of useState How Hooks improve code structure Managing dynamic data inside components Learning Hooks made me realize how React handles dynamic UI updates efficiently. Things are starting to connect now — components, props, functions, and state. Step by step, building stronger React fundamentals 🚀 #ReactJS #Hooks #useState #FrontendDevelopment #JavaScript #WebDeveloper #LearningJourney #Consistency

I wasted 3 months watching React tutorials. Rewatching. Taking notes. Feeling "ready." Then I opened VS Code and went completely blank. Sound familiar? Here's the thing nobody tells you — tutorials teach you to follow, not to build. And there's a massive difference between the two. So I made this instead. 5 core React concepts. Zero fluff. One slide each. → Components → Props → useState → useEffect → Rendering Lists That's literally 80% of what you need to start building real projects. Save this. Open your editor. Break something. That's how you actually learn React. 🔖 Save this post before you forget ♻️ Repost if this would help someone in your network #React #ReactJS #WebDevelopment #Frontend #JavaScript #LearnToCode #100DaysOfCode #Developer #Coding #wasaydevops

📚 React Learning — State & useState Today I revised the concept of state and the useState hook in React. State acts as a component’s memory that stores dynamic data. Using useState, we can manage and update this data, and whenever the state changes, React automatically re-renders the component to reflect the updated UI. Strengthening the fundamentals step by step. #ReactJS #FrontendLearning #JavaScript #ReactConcepts #100DaysOfCode

Learning React made me realize something — frontend isn’t about “changing elements.” It’s about controlling state and thinking in systems. Once that clicked, everything started making sense. Still early in the journey, but the foundation is getting stronger every day. Next stop: advanced hooks and performance optimization. Building > consuming. #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney #LearnInPublic #FullStackPath

One thing I’ve been doing more often while building features is testing small pieces of logic before moving forward. Not full testing frameworks — just simple checks while the code is running. Clicking the same button multiple times. Trying unexpected inputs. Refreshing the page in the middle of a request. Sometimes that’s where small issues appear. A state that doesn’t reset. A value that becomes undefined. A component that behaves differently after a refresh. Catching those small things early makes the feature feel much more solid. It’s a quiet part of development, but it makes a big difference once everything starts coming together. Still building. Still learning from the small details inside the code. #FrontendDevelopment #ReactJS #JavaScript #WebDevelopment #SoftwareDevelopment

One Hook. Zero Re-renders. Infinite Control. ⚡ That’s the power of useRef in React. Instead of re-rendering like useState, useRef quietly stores values and gives direct DOM access when needed. 🎬 Control a video player 📝 Focus an input instantly ⏱ Store timer IDs 📊 Track previous values If you’re learning React, mastering useRef is a must! Save this post for later 📌 #ReactJS #ReactHooks #WebDev #FrontendLife #CodingTips #JavaScript #DeveloperCommunity #TechPost

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 7/30 I typed inside an input… clicked “Add new item”… and the text moved to another field 😳 The bug? key={index} I used array index as React key. React does not track elements. React tracks keys. When list order changes, React reuses DOM nodes, so your input becomes a different item. Fix 👇 key={item.id} Stable key = stable UI. React warnings are not decoration… they are future bugs. Day 8 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse