Shift from thinking pages to components in React development

🚀 Today I Learned: React Lifecycle (Class vs Functional Components) Today I spent some time understanding how React components live, update, and disappear inside an application. This concept is called the React Lifecycle. Every component in React goes through three main phases: 🔹 Mounting – When a component is created and added to the DOM for the first time. In class components this involves steps like the constructor, rendering the UI, and then running logic after the component is mounted. 🔹 Updating – This phase happens whenever state or props change. React re-renders the component and updates the DOM with the new changes. 🔹 Unmounting – This is when a component is removed from the DOM. Any cleanup logic should happen here. One interesting thing I realized is how functional components handle lifecycle differently compared to class components. Instead of multiple lifecycle methods, functional components mainly rely on effects and dependencies to control behavior during mounting, updating, and unmounting. 💡 My key takeaway today: Even though the implementation looks different in class and functional components, the core lifecycle phases remain the same — Mount → Update → Unmount. Understanding this makes it much easier to reason about when and why React components run certain logic. Learning React step by step and connecting these concepts is starting to make the framework feel much more intuitive. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode #DeveloperLife #Coding #BuildInPublic #CodingChallenge #FrontendDeveloper #DeveloperJourney #WebDevCommunity #MERNStack #Consistency #TechLearning #FullStack

⚛️ One thing that improved my React code significantly: Understanding when and why components re-render. In React, a component re-renders when: • Its state changes • Its props change • Its parent component re-renders Early in my projects, I didn’t think much about this. But as applications grow, unnecessary re-renders can affect performance. Some things that helped me manage this better: 🔹 Using React.memo for pure components 🔹 Memoizing functions with useCallback 🔹 Memoizing expensive calculations with useMemo But an important lesson: Premature optimization can make code harder to maintain. First build clean components. Optimize only where performance actually matters. React performance is less about tricks and more about understanding how rendering works. #ReactJS #FrontendDevelopment #ReactPerformance #JavaScript #SoftwareEngineering Ankur Prajapati MOHD ALI ANSARI Sheryians Coding School

⚛️ One concept that confused me a lot while learning React was: Props vs State At first they both felt similar. But a simple way to understand it is: 🔹 Props → Data passed from parent component 🔹 State → Data managed inside the component Example mindset: Props = Inputs State = Internal memory Props are read-only. State can change over time. Once I understood this difference, React components started making much more sense. Building UI is really about managing data flow properly. React just gives us a structured way to do it. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #FullStackDeveloper Ankur Prajapati MOHD ALI ANSARI Sheryians Coding School

Today I learned some very important concepts in React that help in building scalable and maintainable applications. ** React Components Components are the building blocks of a React application. They allow us to divide the UI into reusable and independent pieces. ** Props (Properties) Props are used to pass data from one component to another, making components dynamic and reusable. Example: function Greeting(props) { return <h2>Hello, {props.name}</h2>; } ** Props Drilling Props drilling happens when data is passed through multiple components just to reach a deeply nested component. This can make code harder to manage in large applications. ** Batching in React React groups multiple state updates into a single re-render for better performance. This process is called batching and helps optimize application efficiency. Every day I’m getting closer to becoming a better Full Stack Developer by learning and practicing consistently. @Sheryians Coding School @Sarthak Sharma @Ritik Rajput @Daneshwar Verma @Devendra Dhote #ReactJS #FullStackDeveloper #WebDevelopment #CodingJourney

📌 Today I learned: useReducer — React's powerful alternative to useState When state logic gets complex, useReducer brings structure and clarity. The core concept: ``` const [state, dispatch] = useReducer(reducer, initialState); ``` Instead of directly updating state, you dispatch **actions**. The reducer — a pure function — takes the current state + action and returns the next state. 🔑 Key benefits I discovered: → Centralised logic — all state transitions live in one function → Easier debugging — every state change has an explicit action → Scales better — perfect for complex UI with multiple transitions → More testable — reducers are just pure functions! UseReducer shines when: • You have 3+ related state variables • State updates depend on previous state • Multiple actions affect the same piece of state Think of it like Redux — but built right into React, no extra libraries needed. One day of learning, but the concept already feels foundational. Excited to keep building with it! 🚀 #ReactJS #useReducer #StateManagement #JavaScript #WebDevelopment #FrontendDev #LearningInPublic

I built something fun for the React community. A live playground where you can paste any React component and instantly see it working — no setup, no npm run dev, no local environment. Try it here: https://lnkd.in/gejCnyVM The idea is simple: You write or generate a component, paste it, and watch it come to life immediately. It’s built to help you experiment faster, debug visually, and understand components without friction. Here’s a quick way to test it: Go to GPT Ask: “Create a React component for …” Copy the code Paste it into the playground See the result instantly No installs. No configs. Just code → output. It’s especially useful when: You want to quickly test a UI idea You’re learning React and want instant feedback You’re debugging or tweaking components You don’t want to spin up a full project There are bugs right now. That’s expected. This is an evolving tool and I’m actively improving it with each version. Would love for you to try it and break it. Drop feedback, issues, or ideas — especially from fellow React devs. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #DeveloperTools #BuildInPublic #IndieHackers #Programming #OpenSource #Coding #DevCommunity #TechProjects #ReactDevelopers #SideProject

While learning React, I explored different types of Hooks and realized how powerful they are for managing state and logic inside functional components. Here are some important React Hooks that every developer should understand: 1️⃣ useState Used to create and manage state inside a component. Example: counters, form inputs, toggles. 2️⃣ useEffect Used for handling side effects like API calls, timers, or updating the DOM after rendering. 3️⃣ useContext Helps share data between components without passing props manually through every level. 4️⃣ useRef Used to directly access DOM elements or store values that don’t trigger re-renders. 5️⃣ useMemo Optimizes performance by memoizing expensive calculations. 6️⃣ useCallback Returns a memoized version of a function to prevent unnecessary re-renders. What I like about Hooks is how they make React components simpler, cleaner, and easier to manage compared to class components. Understanding hooks really helps in building scalable and maintainable React applications. Still exploring more and building projects while learning. 🚀 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearnInPublic

Today I learned about React Hooks, especially the useState hook and Batching. 🔹 Hooks allow functional components to use React features like state and lifecycle. 🔹 useState is used to store and update data inside a component. const [count, setCount] = useState(0) • count → current state • setCount → function to update state When the state changes, React re-renders the component and updates the UI. 🔹 Batching means React groups multiple state updates together and performs a single re-render, which improves performance. 💡 Key idea: Hooks make React code simpler, cleaner, and more powerful. Big thanks to Devendra Dhote and Sheryians Coding School for explaining these concepts clearly 🙌 📌 Day 12 of my 21 Days JavaScript / React Challenge #ReactJS #JavaScript #ReactHooks #LearningInPublic #WebDevelopment

📅 Day 21/21 – React Hook Form & Validation (Final Day 🎯) ⚛️ On the final day of my challenge, I learned how to handle forms and validation efficiently using React Hook Form. 🔹 What is React Hook Form? It is a library that simplifies form handling in React with: ✔ Less code ✔ Better performance ✔ Built-in validation support 🔹 Why use it? Instead of managing multiple states manually: • It uses refs internally • Reduces unnecessary re-renders • Makes forms cleaner and scalable 🔹 Basic Example import { useForm } from "react-hook-form"; function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> <button type="submit">Submit</button> </form> ); } 🔹 Validation Example <input {...register("email", { required: "Email is required" })} /> 💡 Final Takeaway from 21 Days Over the last 21 days, I learned: ✔ Core JavaScript concepts ✔ React fundamentals ✔ Real-world development thinking ✔ Consistency and discipline This journey helped me grow from learning concepts → building projects → understanding how things work internally. 🙏 Thanks to Devendra Dhote and Sheryians Coding School for the guidance throughout this journey. 🚀 This is not the end… just the beginning. #ReactJS #JavaScript #FrontendDeveloper #LearningInPublic #Consistency #WebDevelopment

🚀 Understanding the React Component Lifecycle with Hooks When I first started learning React, one thing confused me a lot: When exactly do hooks run? Sometimes my useEffect ran twice. Sometimes state updates caused unexpected re-renders. And debugging it felt like chasing a ghost in the code. 😅 After spending time digging into it, I realized something simple: React components basically go through three main phases. 1️⃣ Mounting – The component is created This is when the component first appears on the screen. During this phase: useState initializes state useContext reads context useEffect([]) runs once after the first render 2️⃣ Updating – The component re-renders This happens whenever something changes. For example: State changes Props change Context changes React re-renders the component and then runs: useEffect([dependency]) only if the dependency changed. 3️⃣ Unmounting – The component is removed When a component disappears from the UI. This is where cleanup functions become important. Example: Remove event listeners Cancel API requests Clear intervals That’s why useEffect can return a cleanup function. 💡 One small insight that helped me: Think of React components like a life cycle: Born → Update → Die Once this mental model clicks, hooks become much easier to understand. I made this visual guide to simplify the concept 👇 💬 Curious to know: When learning React, which hook confused you the most? useEffect useState useContext Something else? Let’s discuss in the comments 👇 🔖 Save this post if you're learning React. 🔁 Share it with someone who is starting their React journey. #react #reactjs #javascript #webdevelopment #frontenddevelopment #coding #softwaredevelopment #programming