React Hooks: Call at Top Level for Predictable Code

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

🚀 Day 7/30 – React Hooks (Game Changer) Today I learned one of the most powerful concepts in React ⚡ 👉 Hooks Today I learned: ✅ Hooks let you use state & lifecycle features in functional components ✅ No need to write class components anymore ✅ Makes code cleaner and easier to manage 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); } 🔥 Key Takeaway: Hooks = Less code + Better readability + Powerful logic 💡 Bonus: Common Hooks: - useState → manage state - useEffect → side effects - useRef → access DOM Are you using Hooks or still learning them? 👇 #React #Hooks #Frontend #WebDevelopment #JavaScript #CodingJourney

When I started writing React, I genuinely thought more components = better code. So I broke everything down. Forms, labels, error messages each one its own file. My folder structure looked impressive. My brain hurt trying to debug it. Nobody told me I was solving a problem that didn't exist yet. The shift happened when I actually shipped something and had to live with the code for weeks. Not read about it. Not watch someone refactor it on YouTube. Just... sit with it, confused, until things started making sense. What I figured out slowly: a component isn't about cleanliness. It's about responsibility. One reason to exist. That's it. Once I started asking "does this actually need to be separate?" instead of "can I make this reusable?" things got simpler. Not more sophisticated. Just simpler. The uncomfortable part is that you have to let things be messy first. Let the duplication stay. Let the file grow past what feels acceptable. The real boundaries don't show up until the code tells you where they are and it won't tell you on day one. I still catch myself over-abstracting. Probably always will. But now I at least notice when I'm doing it for my own satisfaction vs. because the code actually needs it. Build the thing. Sit with it. Refactor when it genuinely hurts. That order matters more than any pattern or principle I've read about. #ReactJS #Frontend #WebDevelopment #JavaScript #ComponentArchitecture #SoftwareEngineering #DevJourney

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

Most React devs copy-paste the same logic across 10 components. Custom Hooks exist so you never have to. Here's what changed when I started writing my own hooks: Before custom hooks: ->useEffect + useState duplicated everywhere ->Data fetching logic scattered across files ->Business logic tangled inside UI components ->Testing was a nightmare After custom hooks: ->One useFetch handles all API calls ->One useLocalStorage replaces 20 lines of boilerplate ->Logic lives in one place, tested once, reused everywhere The rule I follow: If you write the same 3+ lines of hook logic twice — extract it. Custom hooks aren't just about reuse. They're about intent. A component that calls useUserPermissions() is infinitely more readable than one drowning in raw useEffect and useState calls. Start with these 3 hooks every project needs: 🔹 useFetch(url) — data fetching with loading + error state 🔹 useDebounce(value, delay) — debounce any input 🔹 useLocalStorage(key, default) — persistent state in one line Once you build your own hook library, you'll wonder how you ever shipped without it. 💬 What's the most useful custom hook you've ever written? Share it below — let's build a list 👇 #ReactJS #CustomHooks #Frontend #JavaScript #WebDevelopment #React #CleanCode #Programming #SoftwareEngineering

Forms in React can get messy really fast. I recently explored React Hook Form, and it made things much simpler. Instead of handling state for every input manually, it uses refs and uncontrolled components to manage form data efficiently. 1. Less boilerplate code 2. Simple and flexible validation 3. Fewer re-renders -> better performance It keeps your code clean and improves user experience without adding complexity. If you're building forms in React, this is definitely worth trying. #react #webdevelopment #javascript #frontend #coding

React Tip: Structure your component files Many React components become difficult to maintain because everything is written in random order inside one file. A simple structure improves readability a lot. Recommended order inside a component: 1. Imports 2. Props / Types 3. Helper or utility functions 4. State and Effects (useState, useEffect, etc.) 5. Guard clauses (loading / error handling) 6. JSX return Why this helps: • Faster understanding of the code • Easier debugging • Cleaner code reviews • Better collaboration in teams In React, performance matters — but readability matters just as much. Well-structured components make large applications easier to scale and maintain. #ReactJS #FrontendDevelopment #JavaScript #CleanCode

Where to Place Images in React.js & Next.js: A Quick Guide. One of the most common confusions for beginners (and even mid-level devs) is: "Where exactly should I put my images?" Here's a simple breakdown : ⚛️ React.js (CRA / Vite) /public — for static files accessed by URL (favicon, OG images) /src/assets — for images you import directly into components (better cache busting!) ▲ Next.js /public — same as React, served at the root URL. Use next/image component — always! It gives you lazy loading, WebP conversion & prevents layout shift automatically. → For external images (Cloudinary, Unsplash, CDN) — whitelist the domain in next.config.js first. 🏆 Golden Rules: ✅ Always use next/image in Next.js — never a plain <img> tag ✅ Import images in React for cache busting & tree shaking ✅ Keep /public only for files that need a fixed, stable URL ✅ Compress your images before uploading — optimization starts before the code! Small decisions like this make a big difference in performance and maintainability. #ReactJS #NextJS #WebDevelopment #Frontend #JavaScript #Programming

I just deleted 30 lines of code from a React component. no refactor. no library. just one hook in React 19. it's called use() — and it changes how you handle async data and context in your components. most devs haven't heard of it yet. swipe through ↓ broke it down simply what's the most boilerplate you've deleted in a single React upgrade? 👇 #react #react19 #javascript #webdev #frontend

🔥 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