React 19 Simplifies Context API

🚀 Day 37— Managing Complex State with useReducer in React As React applications grow, managing state with simple hooks can become difficult to scale. Today I explored how React provides a powerful alternative through the useReducer hook for handling complex state logic in a predictable way. While useState works perfectly for simple updates, useReducer shines when state transitions depend on previous state or multiple actions. Here are the key concepts I learned today 👇 🔹 What is useReducer? useReducer is a hook used for advanced state management inside React components. It follows a pattern similar to Redux, but it is built directly into React, making it lightweight and easy to implement. This approach helps structure state updates in a clear and predictable manner. 🔹 Core Building Blocks 1️⃣ initialState Defines the starting value of the component’s state. Example: const initialState = { count: 0 }; 2️⃣ reducer(state, action) A pure function that determines how the state changes based on the action dispatched. Example logic: increment counter decrement counter reset state 3️⃣ The useReducer Hook Inside the component, useReducer connects the state with the reducer logic. const [state, dispatch] = useReducer(reducer, initialState); • state → current state value • dispatch() → sends actions to update the state 🧠 Why useReducer Matters Using the reducer pattern helps developers: • manage complex state transitions • keep update logic centralized • make components easier to debug and maintain • scale state management in larger components Moving from useState to useReducer feels like a major step toward writing structured and production-ready React code. Onward to Day 38 🚀 💬 For React developers: Do you prefer managing state with useState, useReducer, or external libraries for larger applications? #ReactJS #ReactHooks #useReducer #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #100DaysOfCode #LearningInPublic #ReactDeveloper #CodingJourney

This is one of the 𝗯𝗶𝗴𝗴𝗲𝘀𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝗻 𝘆𝗲𝗮𝗿𝘀. It finally solves the long-standing issues with the Date API. Whenever I worked with dates in JavaScript, I always had questions like: • Why does the same date behave differently across timezones? • Why are months 0-based? • Why is date parsing so inconsistent? • Why do we need libraries like Moment.js or Day.js for basic things? Turns out, it’s not just us. The Date API has design limitations. Now JavaScript has introduced a new solution: 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗔𝗣𝗜. It brings: • Better timezone handling • Immutable and predictable behavior • Clear separation of date, time, and timezone • Cleaner and more modern API design I recently explored this and broke down the real issues with the Date API and how Temporal fixes them. Video link in the comments: Would love to know, what’s the most confusing thing you have faced while working with JavaScript Date? TELUSKO Navin Reddy Hyder Abbas Harsh Rawal Akshay Agarwal Gaurav Sharma Siddhartha Hazra Sushil Rawal #javascript #webdevelopment #frontend #programming #developers

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

🚀 Understanding Class Components in React One concept that helped me understand how components work internally was Class Components. Before Hooks became popular, class components were the primary way to manage state and lifecycle methods in React applications. A class component is simply a JavaScript class that extends React.Component and must contain a render() method that returns JSX. Example: import React, { Component } from "react"; class Welcome extends Component { render() { return <h1>Hello World</h1>; } } export default Welcome; In class components: 🔹 Props are accessed using this.props 🔹 State is managed using this.state 🔹 State updates are done with this.setState() 🔹 Lifecycle methods like componentDidMount() allow us to run code when the component mounts, updates, or unmounts. Example with state: class Counter extends Component { state = { count: 0 }; increase = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <button onClick={this.increase}> {this.state.count} </button> ); } } Today, most developers prefer Functional Components with Hooks like useState and useEffect, but understanding Class Components is still valuable because: ✅ Many legacy React projects still use them ✅ They help you understand React's lifecycle deeply ✅ Some interview questions still cover them Learning both approaches gives you a stronger foundation in React. Sometimes, understanding the old way helps you appreciate the modern way even more. #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic

💡 Understanding How useState Works Internally in React Most developers use "useState" daily, but have you ever wondered how it actually works behind the scenes? In React, "useState" is a Hook that allows functional components to manage state. But internally, React maintains a structured mechanism to track and update that state efficiently. 🔹 Conceptually, useState works like this: 1️⃣ State Initialization When "useState(initialValue)" is called, React stores the state value in a hook list associated with the component's Fiber node. 2️⃣ Returning State and Updater Function const [count, setCount] = useState(0); React returns: - The current state value ("count") - A setter function ("setCount") used to update the state. 3️⃣ State Update Mechanism setCount(prev => prev + 1) When invoked: - React schedules a re-render. - The new state is calculated. - React compares the Virtual DOM with the previous one. - Only the necessary DOM changes are applied. 4️⃣ Why Hooks Must Follow Order React identifies hooks by their call order, which is why hooks must always be called at the top level of a component. ⚙️ Simplified Conceptual Implementation function useMyState(initialValue) { let state = initialValue; function setState(callback) { state = callback(state); return state; } return [state, setState]; } This simple example helps visualize the core idea behind how "useState" manages state updates. 🚀 Understanding these internals helps developers write better, predictable, and optimized React applications. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #SoftwareEngineering

🔥 Why useEffect Runs Twice in React Strict Mode If you’ve seen this while developing with React: JSX code : useEffect(() => { console.log("Effect ran"); }, []); You expect this to run once. But in development, the console shows: Effect ran Effect ran So… is React broken? Not really. 🧠 What’s Actually Happening When React Strict Mode is enabled, React intentionally runs some lifecycle logic twice in development. This includes useEffect. Why? Because React is checking if your effects are safe and predictable. 🔍 What React Is Testing React wants to detect bugs like: Side effects that are not cleaned up Code that relies on running only once Hidden memory leaks To do that, React: 1️⃣ Mounts the component 2️⃣ Runs the effect 3️⃣ Immediately unmounts it 4️⃣ Mounts it again If your cleanup logic is correct, everything still works. ✅ Example with Cleanup JSX code useEffect(() => { const id = setInterval(() => { console.log("running"); }, 1000); return () => clearInterval(id); }, []); This ensures no leftover side effects. 🎯 Important Note This only happens in development. Production builds run effects normally. #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #LearningInPublic

Day 7:𝐘𝐨𝐮𝐫 𝐑𝐞𝐚𝐜𝐭 𝐀𝐩𝐩 𝐈𝐬𝐧'𝐭 𝐒𝐥𝐨𝐰. 𝐘𝐨𝐮𝐫 𝐑𝐞𝐧𝐝𝐞𝐫 𝐀𝐫𝐜𝐡𝐢𝐭𝐞𝐜𝐭𝐮𝐫𝐞 𝐈𝐬. Most performance problems in React aren't caused by heavy computation. They're caused by components re-rendering when they shouldn't. And that's an architecture problem — not a React problem. The 3 silent performance killers: -->State too high in the tree When global state lives at the top, every update re-renders the entire subtree. Move state down. Keep it close to where it's used. -->Everything in one component A component that fetches, transforms, and renders — re-renders entirely for any change. Split responsibilities. Isolate re-renders. -->Server state in global store Storing API responses in Redux/Zustand triggers app-wide re-renders. Server state belongs in React Query or SWR — not your global store. The fix isn't useMemo everywhere. That's patching symptoms. The fix is: ✔ Co-locate state with the component that owns it ✔ Separate server state from UI state ✔ Keep components focused and small ✔ Use React DevTools Profiler before optimizing anything 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐢𝐬 𝐧𝐨𝐭 𝐚 𝐟𝐞𝐚𝐭𝐮𝐫𝐞 𝐲𝐨𝐮 𝐚𝐝𝐝 𝐚𝐭 𝐭𝐡𝐞 𝐞𝐧𝐝. 𝐈𝐭'𝐬 𝐚 𝐜𝐨𝐧𝐬𝐞𝐪𝐮𝐞𝐧𝐜𝐞 𝐨𝐟 𝐭𝐡𝐞 𝐚𝐫𝐜𝐡𝐢𝐭𝐞𝐜𝐭𝐮𝐫𝐞 𝐲𝐨𝐮 𝐝𝐞𝐬𝐢𝐠𝐧 𝐟𝐫𝐨𝐦 𝐭𝐡𝐞 𝐬𝐭𝐚𝐫𝐭. 💬 Where have you seen the worst re-render issues in your projects? #ReactJS #Frontend #WebDevelopment #JavaScript #SoftwareArchitecture

🧠 𝗪𝗵𝘆 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀 𝗠𝗮𝗸𝗲 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 𝗖𝗹𝗲𝗮𝗻𝗲𝗿 As React applications grow, components can quickly become cluttered with repeated logic like data fetching, form handling, or authentication checks. This is where 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀 become incredibly powerful. Custom Hooks allow developers to extract reusable logic from components and place it into a dedicated function. Instead of duplicating code across multiple components, the logic can be reused wherever needed. For example: ✔ useFetch() for API requests ✔ useAuth() for authentication logic ✔ useDebounce() for optimized input handling Benefits of using Custom Hooks: • Reusable logic across components • Better separation of concerns • Cleaner and more readable components By moving complex logic into hooks, components stay focused on 𝗨𝗜 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴, making the codebase easier to maintain and scale. Clean code is not just about writing less code — it's about writing 𝗯𝗲𝘁𝘁𝗲𝗿 𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝗱 𝗰𝗼𝗱𝗲. #ReactJS #FrontendDevelopment #CustomHooks #JavaScript #WebDevelopment #ReactDeveloper

⚛️ 3 Common Mistakes Developers Make That Hurt React Performance While building React applications, I’ve noticed that performance issues often come from small architectural decisions rather than the framework itself. Here are three common mistakes developers make: 1️⃣ Unnecessary Re-renders Many components re-render more often than needed. This usually happens when state is lifted too high or when functions and objects are recreated on every render. ✔️ Using techniques like React.memo, useCallback, and useMemo can significantly reduce unnecessary renders. 2️⃣ Fetching Data Inefficiently Fetching data directly inside multiple components can cause duplicate API calls and slow down the application. ✔️ Using centralized data fetching, caching strategies, or tools like React Query can improve both performance and scalability. 3️⃣ Large Components Doing Too Much When a single component handles too many responsibilities, it becomes harder to optimize and maintain. ✔️ Breaking UI into smaller reusable components improves performance and keeps the codebase cleaner. Performance optimization in React is rarely about complex tricks — it’s usually about writing clean, predictable, and well-structured components. What React performance issue have you faced recently? #ReactJS #FrontendDevelopment #WebPerformance #JavaScript #SoftwareEngineering

In React, a reusable input component acts as a controlled wrapper around a native <input>. It takes props from its parent (like value, onChange, label and error) to keep data flow predictable and consistent. Here’s the key flow: - The parent form component manages the state (formeData, errors) - Each child component (e.g., input field) receives its value and event handler through props. -When a user types, the onChange event triggers a state update in the parent. This structure separates responsibilities where the form handles data and validation while the input handles display and interaction. Below diagram illustrates the controlled data flow loop in React forms. At the top, the parent component (form) holds the state, which serves as the single source of truth for the form data. The state’s value and an onChange handler are passed downward to the child component (<InputField>), which displays the value and triggers the onChange event when the user types. This event flows upward to the parent, asking it to update its state based on the user’s input. Once the state is updated, React rerenders the UI, sending the latest value back down to the input field, completing the loop. This continuous cycle ensures that the parent’s state always controls the form, keeping the interface predictable, consistent, and synchronized with user interactions. #react #frontend #javascript #reactjs #nextjs #software #webdevelopment