React Hook Form & Validation with ReactJS

Day 1 of learning React Today marks the beginning of my journey into React, and I’m excited to share what I’ve learned so far. I started by understanding how to set up React using external libraries and how Babel plays an important role. Since browsers don’t understand JSX directly, Babel compiles it into regular JavaScript that the browser can execute. One thing I’ve realized already is that React makes building user interfaces more structured and scalable. Instead of writing plain JavaScript, we use JSX a syntax that looks like HTML but works inside JavaScript. Here are a few core concepts I explored today: • Components Components are like reusable building blocks for your UI. Instead of writing one large file, you break your interface into smaller, manageable pieces. Example: function Welcome() { return Hello, World!; } • Fragments Sometimes you want to return multiple elements without adding unnecessary divs to your HTML. That’s where fragments come in. Example: <> • Props Props (short for properties) allow you to pass data from one component to another, making your components dynamic. Example: function Welcome(props) { return Hello, {props.name}; } • Conditional Rendering (Guard Operator) In React, we can use the “&&” operator directly inside JSX to render something based on a condition. Example: {isLoggedIn && Welcome back!} This will only display the message if isLoggedIn is true. It hasn’t been easy stepping into something new, but I’m committed to learning and improving every day. #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney #100DaysOfCode #BuildInPublic

🚀 Understanding Hooks in React (Simple Explanation) When I first started learning React, I thought state management was only possible with class components… but then I discovered Hooks — and everything changed. 👉 Hooks are special functions in React that allow functional components to use features like state and lifecycle methods. 💡 Example: With useState, we can easily manage state inside a function component — no need for classes anymore. Why Hooks are powerful: ✔ Cleaner and more readable code ✔ Reusable logic across components ✔ Less boilerplate compared to class components ✔ Makes development faster and more scalable Some commonly used Hooks: 🔹 useState – manage state 🔹 useEffect – handle side effects (API calls, timers) 🔹 useRef – access DOM elements 🔥 One simple line: Hooks = extra powers for functional components. Learning Hooks really changed how I write React code — and made development feel much more intuitive. #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #Developers

I posted every single day for 12 days straight about React. Here's what actually happened — and what I learned building this series from scratch. 𝗧𝗵𝗲 𝗵𝗼𝗻𝗲𝘀𝘁 𝗻𝘂𝗺𝗯𝗲𝗿𝘀 𝗳𝗶𝗿𝘀𝘁: 12 posts. 12 carousels. 60 slides designed from scratch. Somewhere between 3–5 hours of work per post when you count the research, writing, designing, and editing. Nobody tells you that before you start. 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱 𝗮𝗯𝗼𝘂𝘁 𝘁𝗲𝗮𝗰𝗵𝗶𝗻𝗴: The posts I thought would perform best — didn't. The post I almost didn't publish (Day 5 on useEffect) got the most saves. Teaching a concept forces you to actually understand it. I thought I knew useEffect. Writing Day 5 proved I had gaps. I thought I knew Redux. Writing Day 9 made me realise I'd been using it wrong for a year. 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱 𝗮𝗯𝗼𝘂𝘁 𝗟𝗶𝗻𝗸𝗲𝗱𝗜𝗻: People don't want perfect. They want honest + useful. The posts with "I made this mistake too" outperformed the ones that sounded like documentation. Comments matter more than likes. One good comment thread is worth 500 silent likes. Consistency is the only real hack. The algorithm didn't care that I posted on Day 1. It started paying attention around Day 7. 𝗪𝗵𝗮𝘁'𝘀 𝗰𝗼𝗺𝗶𝗻𝗴 𝗻𝗲𝘅𝘁: I'm building something real — in public. A full React + Next.js data dashboard. Every decision, every bug, every shipped feature — posted here as it happens. No more just teaching theory. Time to show the work. If this series helped you, drop the Day number that clicked the most. I'm genuinely curious which one lands differently for different people 👇 Save this post if you want to follow what's coming next 📌 #ReactJS #BuildInPublic #LearnInPublic #JavaScript #Frontend #WebDevelopment #TechLinkedIn #Gramener

I just published a new article breaking down some of the most important React fundamentals that finally clicked for me. https://lnkd.in/df7igt6X It covers: - Declarative vs Imperative thinking - Components and Props - State and why it actually matters - The real reason React re-renders - Common mistakes with event handling One of the biggest takeaways for me was understanding this: React doesn’t “update variables” — it re-runs your component, and only state survives between renders. That small shift in thinking makes a huge difference when working with React. If you’re learning React or struggling with concepts like state and re-renders, this might help clarify things. I’d appreciate any feedback or thoughts. #React #JavaScript #Frontend #WebDevelopment #LearningInPublic

Just shared a new article on Medium about React Custom Hooks! 🚀 As React developers, we often struggle with bloated components. Custom Hooks are a game-changer for extracting reusable logic and keeping our codebase DRY (Don't Repeat Yourself). In this article, I cover: ✅ What Custom Hooks are ✅ Building a reusable useFetch hook ✅ Best practices for clean code Check it out here: https://lnkd.in/g2Pp46As #ReactJS #WebDevelopment #JavaScript #Programming #Frontend #CodingTips

Props vs State in React Most beginners get confused between Props and State in React. At first, both seem similar because both store data. But the real difference is simple: * Props = Data received from another component * State = Data managed inside the component Example: function Parent() { return <Child name="Durgesh" />; } function Child(props) { return <h1>{props.name}</h1>; } Here, `name` is a prop because it comes from the Parent component. Now look at State: const [count, setCount] = useState(0); Here, `count` is managed inside the same component. Quick Difference 👇 • Props are read-only • State can be updated • Props come from parent to child • State belongs to the component itself Think like this: Props = Things you receive State = Things you control Once you understand this difference, React becomes much easier. What confused you more when learning React — Props or State? #react #javascript #frontend #webdevelopment #reactjs #coding

Day 25: Best React Folder Structure (Production Level) Last Post for REACTJS Learning series. One of the biggest problems developers face is: ❌ Messy folder structure ❌ Difficult to scale projects ❌ Hard to maintain code A good folder structure makes your React app: ✅ Clean ✅ Scalable ✅ Easy to debug ✅ Easy to collaborate 📌 Recommended React Folder Structure src/ ├── assets/ ├── components/ ├── pages/ ├── routes/ ├── hooks/ ├── context/ ├── services/ ├── utils/ ├── styles/ ├── App.js └── main.jsx 📌 Folder Explanation ✅ assets/ Images, icons, fonts ✅ components/ Reusable UI components (Button, Navbar, Card) ✅ pages/ Pages like Home, About, Dashboard ✅ routes/ All routing logic (React Router setup) ✅ hooks/ Custom hooks (useFetch, useAuth) ✅ context/ Context API files (AuthContext, ThemeContext) ✅ services/ API calls and backend communication (axios setup) ✅ utils/ Helper functions (formatDate, validation) ✅ styles/ CSS, Tailwind config, global styles 📌 Why this structure is best? 🔥 Keeps code modular 🔥 Easy to find files 🔥 Helps in team collaboration 🔥 Makes project scalable for production 📌 Pro Tip 👉 Keep components small and reusable. If a component becomes too large, split it into sub-components. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #SoftwareEngineering

⚛️ React Tip: When Should You Use useCallback? While working on React applications, one common performance issue developers face is unnecessary component re-renders. One hook that often comes up in this discussion is useCallback. But many developers (including me earlier) either overuse it or use it incorrectly. So here’s a simple way to understand it. 🔹 What does useCallback do? `useCallback` memoizes a function. This means React will reuse the same function instance unless its dependencies change. Example 👇 const handleClick = useCallback(() => { console.log("Button clicked"); }, []); Without `useCallback`, a new function is created every time the component re-renders. Most of the time this isn’t a problem. But it becomes important when passing functions to memoized child components. 🔹 Example scenario Imagine a parent component passing a function as a prop to a child component wrapped with `React.memo`. If the function reference changes on every render, the child component will also re-render unnecessarily. Using `useCallback` helps keep the function reference stable, preventing those extra renders. 🔹 When should you actually use it? ✅ When passing callbacks to memoized components ✅ When the function is a dependency in another hook ✅ When optimizing large component trees ⚠️ When NOT to use it: • For every function in your component • When there is no performance issue • Just because someone said it improves performance 💡 One important lesson I’ve learned: Optimization should be intentional, not automatic. React already does a lot of work under the hood. Use hooks like `useCallback` only when they actually solve a problem. Curious to hear from other developers 👇 Do you use `useCallback` often, or do you prefer optimizing only after profiling? #reactjs #frontenddevelopment #javascript #webdevelopment #reacthooks #softwareengineering #coding

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

I spent 3 months confused by React. Then I learned Hooks — and everything finally clicked. Most tutorials throw you into class components and lifecycle methods. It's overwhelming. But Hooks changed everything — they made React actually fun to write. Here's the complete mental map I wish I had on day one: ⚡ useState — add local state to any function component ⚡ useEffect — handle side effects (API calls, subscriptions) 🔵 useRef — access DOM elements & persist values without re-rendering 🔵 useContext — share data across the component tree 🟡 useMemo — cache expensive calculations 🟡 useCallback — memoize functions to prevent unnecessary re-renders 🟢 useReducer — manage complex state with reducer logic 🟢 useLayoutEffect — like useEffect, but fires before paint 5 tips to go from beginner → advanced: Master useState & useEffect DEEPLY before moving on Build custom hooks — extract logic you reuse (e.g. useWindowSize) Think in data flow — hooks work best when you understand how state moves Optimize wisely — reach for useMemo/useCallback only when you actually need them Keep building. Real projects teach what tutorials can't. Hooks aren't just syntax — they're a new way of thinking about UI logic. If you're just starting out: be patient with yourself. The mental model takes time. Once it lands, you'll wonder how you ever coded without them. Save this post — it'll make sense in ways it doesn't yet. 🔖 Which Hook was the hardest for you to wrap your head around? Drop it below 👇 #ReactJS #WebDevelopment #JavaScript #Frontend #ReactHooks #Coding #LearnToCode #SoftwareEngineering #100DaysOfCode