Why does React say: "Don't call hooks conditionally"? 🤔 Let’s break it down simply. React doesn’t track hooks by name. It tracks them by order. Every render, React just walks through hooks like this: 1st hook → 2nd hook → 3rd hook That’s it. No labels. No IDs. Just position. Now imagine this 👇 if (condition) { useEffect(() => { // do something }); } 👉 First render: Hook1 → Hook2 → Hook3 👉 Next render (condition = false): Hook1 → Hook3 Now React gets confused 😵 It expects Hook2… but suddenly sees Hook3. This breaks the internal hook mapping — and boom 💥 unexpected bugs or crashes. 👉 The rule exists because hooks must run in the same order on every render. That’s why: ❌ No hooks inside conditions ❌ No hooks inside loops ❌ No hooks inside nested functions 👉 Always call hooks at the top level. Once you understand this, React hooks feel much less “magical” and more predictable. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearnInPublic

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

Today while building a pagination component in React, I came across the use of Array.from() in JavaScript. The problem I was facing was simple: I wanted to show page numbers between the Previous and Next buttons. For example: Prev 1 2 3 4 5 Next At first, I was thinking about how to generate those numbers dynamically instead of writing them manually. That’s when I came across Array.from(). It helped me create an array of a specific length and then generate page numbers from it. Something like this: Array.from({ length: totalPages }, (_, i) => i + 1) This creates: [1, 2, 3, 4, 5] Which can then be mapped easily to render pagination buttons in React. A small thing, but it made pagination logic feel much cleaner and more dynamic. Am I understanding this correctly? Would love to know if there’s a better or more practical way you usually handle pagination numbers. #JavaScript #ReactJS #WebDevelopment #Frontend #Pagination

🎯 useEffect vs useLayoutEffect: finally made it clear While learning React hooks, I was confused between useEffect and useLayoutEffect. This visual helped me understand the real difference 👇 👉 useLayoutEffect 1. Runs synchronously 2. Executes before the browser paints the UI 3. Useful when you need to measure or update the DOM before it becomes visible 👉 useEffect 1. Runs asynchronously 2. Executes after the UI is painted 3. Best for API calls, timers, subscriptions, etc. 💡 Key takeaway: 1. useLayoutEffect → blocks paint (use carefully) 2. useEffect → doesn’t block UI (preferred in most cases) Also learned how cleanup (destroy/unmount) works to avoid memory leaks especially with intervals and API calls. Small concepts like this make a big difference in writing better React code #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #ReactHooks

🔒 React sanitizes user input automatically. But one line can break everything. Normal rendering? You're safe. <p>{userInput}</p> // React escapes this. Always . The moment you do this — you're on your own: dangerouslySetInnerHTML={{ __html: userInput }} The word "dangerous" is literally in the name. React is warning you. Always pair it with DOMPurify. And never trust user-controlled URLs — a javascript: href executes on click. React is secure by default. Just don't fight against it. Ever used dangerouslySetInnerHTML in production? 👇 #ReactJS #WebSecurity #Frontend #JavaScript

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

⏱️ Built a Todo List with Timer using React Tried building a Todo List where each task has its own timer control — small idea but interesting state handling. Features: • Add todos dynamically • Start timer for each task individually • Reset timer per task • Delete tasks • Independent timer state for every item What I learned: • Managing multiple independent states in a list • Handling setInterval / timers safely in React • Avoiding memory leaks with proper cleanup • Structuring components for better state isolation • Updating UI efficiently without affecting other items This was a great exercise in understanding how to handle time-based state and side effects in React. Concept inspiration from learning resources by Akshay Saini 🚀 NamasteDev.com. Demo 👇 #ReactJS #FrontendDevelopment #JavaScript #BuildInPublic #WebDevelopment

Day 32 of Posting React Content 🧠 What is useCallback? 🎓 Imagine This You enter your college every day. The security guard checks your ID card. You don't explain who you are every time. You just show the same ID card. 💡 In React Sometimes a parent component sends a function to a child component. When React renders again, that function gets created again and again. useCallback prevents this. It keeps the same function and reuses it until something changes. ✨ One Line Understanding Normal React → function recreated every render useCallback → same function reused #ReactJS #ReactHooks #useCallback #FrontendDevelopment #JavaScript #LearnInPublic #CodingJourney #WebDevelopment

Misunderstanding how JavaScript handles functions can hurt your UI performance. In JavaScript, functions are compared by reference. And in React, every render creates new function instances. So even if a function looks exactly the same, it’s actually a different reference in memory. That means when you pass a function as a prop, React sees it as a new value on every render. And if that component is wrapped with React.memo, it will still re-render. Not because React.memo doesn’t work, but because the prop actually changed. This can be solved by keeping the same function reference between renders, which is exactly what useCallback helps you do. This doesn’t mean you should use useCallback everywhere. It only matters when you need a stable function reference, like when passing props to memoized components. I’ve been using these techniques for a while, but it took me some time to really understand why they are often used together. This is a good example of how understanding the fundamentals of JavaScript can directly impact performance and behavior in React applications. (Simplified example in the image) #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering

𝗔 𝗦𝘂𝗯𝘁𝗹𝗲 𝗥𝗲𝗮𝗰𝘁 𝗕𝘂𝗴 𝗖𝗮𝘂𝘀𝗲𝗱 𝗯𝘆 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 Sometimes a React bug isn’t really a React problem. It’s a JavaScript closure problem. Consider this example: A component sets an interval inside useEffect and logs the state value. At first glance, you might expect the console to print the latest value of count. But it doesn’t. It always prints 0. Why? Because the callback inside setInterval captured the value of count from the first render. This happens because of JavaScript closures. When the effect runs, it closes over the variables that existed at that moment. Since the dependency array is empty, the effect runs only once — so the interval keeps using the old value. One simple fix is to include the state in the dependency array so the effect runs again when the value changes. Understanding closures is important when working with: • useEffect • useCallback • useMemo • async callbacks Many confusing React bugs are actually JavaScript closure issues. 👇 Example comparison below Day 12/100 — sharing practical frontend engineering lessons. Have you ever run into a bug caused by closures in React? #ReactJS #FrontendEngineering #JavaScript #SoftwareDevelopment #WebDevelopment