Alex Rogov’s Post

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

🔥 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

5 custom hooks I copy to every React project. Not from a library. Not from a tutorial. From production. Here's my starter kit: 𝟏. 𝘂𝘀𝗲𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗲() Search inputs, resize handlers, API calls — without re-render storms. I've seen apps making 40+ API calls per keystroke. This hook kills that. 𝟐. 𝘂𝘀𝗲𝗣𝗿𝗲𝘃𝗶𝗼𝘂𝘀() Tracks the previous value of any state or prop. Essential for debugging re-renders and building "changed from X to Y" logic. 𝟑. 𝘂𝘀𝗲𝗟𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲() useState, but persistent. Survives page refresh. The catch most people miss: SSR safety. window doesn't exist on the server. 𝟒. 𝘂𝘀𝗲𝗠𝗲𝗱𝗶𝗮𝗤𝘂𝗲𝗿𝘆() Responsive logic in JS without CSS hacks. Show/hide components, change layouts, adjust behavior — all reactive, all clean. 𝟓. 𝘂𝘀𝗲𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿() Auto-cancels fetch requests on component unmount. Nobody writes this hook. Until production breaks with a race condition at 2 AM. These 5 hooks are ~150 lines total. They prevent thousands of lines of bug fixes. What's in your starter kit? #react #hooks

🚀 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

Why do we specifically pass 'props' into 'super(props)' in a React component constructor? It is one of those things many developers do out of habit without realizing the actual mechanism behind it. While calling 'super()' is a JavaScript requirement to initialize the 'this' keyword, passing 'props' is a very specific React requirement for the constructor phase. The reason is simple: visibility. When you call 'super(props)', you are telling the parent 'React.Component' class to initialize 'this.props' for you immediately. If you only call 'super()' without the argument, 'this.props' will be undefined inside the constructor. React eventually assigns props to the instance anyway, but that happens after the constructor has finished running. If your logic requires you to access a property or compute a state based on a prop right inside the constructor, forgetting the 'props' argument will crash your logic. You would be trying to read from a variable that hasn't been wired up to the instance yet. Even though modern React code bases have shifted to Functional Components where this ceremony is gone, the underlying logic of when data becomes available to an instance is a core part of the library’s history. It is a small detail that perfectly illustrates how React works under the hood. #ReactJS #Javascript #SoftwareEngineering #FrontendDevelopment #WebDev #CodingTips

Lazy Loading in React, Boost Performance Like a Pro! Lazy loading is a powerful technique in React where components are loaded only when they are needed, instead of loading everything at once. 👉 Think of it as: Lazy Loading = Code Splitting = Dynamic Imports = On-demand Loading 💡 Why use Lazy Loading? ✔️ Improves performance ✔️ Reduces initial bundle size ✔️ Faster page load experience 🛠️ Key Methods - React.lazy() - for dynamic imports - Suspense - for fallback UI (like loaders) 📌 Basic Syntax const Component = React.lazy(() => import('./Component')); <Suspense fallback={<h1>Loading...</h1>}> <Component /> </Suspense> ⚙️ How it works - Components load only when required - A fallback UI is shown until loading completes 📍 Common Use Cases - Routing (React Router) - Large components - Dashboards ⚠️ Important Points - Works with default exports only - Must be wrapped inside Suspense - It’s a key part of code splitting 🔥 If you are aiming for scalable and high-performance React apps, lazy loading is a must-know concept! #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #CodeSplitting #PerformanceOptimization #ReactDeveloper #Programming #TechTips #SoftwareDevelopment

⚛️ Understanding the Order of Hooks in React One important rule while working with React Hooks is that the order of hooks must remain the same on every render. React relies on the call order of hooks to correctly associate state and effects with a component. Example: function Example() { const [count, setCount] = useState(0); const [name, setName] = useState(""); useEffect(() => { console.log("Component mounted or updated"); }, []); return <div>{count}</div>; } 🔹 Hooks are executed top to bottom on every render. 🔹 Changing their order can break React’s internal state tracking. ❌ Incorrect usage: if (condition) { const [count, setCount] = useState(0); // ❌ Hooks inside condition } ✅ Correct approach: const [count, setCount] = useState(0); if (condition) { // logic here } 📌 Rules of Hooks 1️⃣ Call hooks only at the top level 2️⃣ Call hooks only inside React functions Understanding this helps avoid bugs and keeps components predictable. #React #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Hooks

Most developers just dump everything into one folder. Here's the folder structure I follow in every React/Next.js project — and why it matters. After 13+ years in frontend, I've seen messy codebases slow down entire teams. A clean structure saves hours of debugging and makes onboarding 10x easier. Here's what each folder does: 📁 api — All backend connections in one place. No API calls scattered across components. 📁 assets — Static files only. Images, fonts, icons — nothing else. 📁 components — Reusable UI pieces. If you're copy-pasting a component, it belongs here. 📁 context — Global state without Redux overhead. Perfect for auth, theme, language. 📁 data — Shared static data, constants, mock data. 📁 hooks — Custom logic lives here. Keep your components clean and dumb. 📁 pages — One file per route. Simple, predictable, easy to navigate. 📁 services — Business logic and API call functions. Never write fetch() inside a component. 📁 utils — Helper functions. Date formatting, validators, converters. My 3 golden rules: → If it's reusable — it's a component → If it's logic — it's a hook or service → If it's repeated — it's a utility A clean project structure is not a luxury. It's professionalism. Save this post for your next project. 🔖 What does your folder structure look like? Drop it in the comments 👇 #ReactJS #NextJS #Frontend #WebDevelopment #JavaScript #CSS #HTML #FolderStructure #CleanCode #SoftwareEngineering #FrontendDeveloper #UIDeveloper #WebDev #100DaysOfCode #LearningInPublic #Programming #CodeQuality #React #TechTips #SeniorDeveloper

🚀 What is Hydration in React? Hydration is one of those terms that sounds complex at first, but the idea behind it is actually simple. When we use Server Side Rendering (SSR), the server sends ready-made HTML to the browser. Because the HTML is already generated, the page appears on the screen very quickly. But at this moment, the page is only static — buttons don’t work, and there is no interaction yet. Then React loads the JavaScript bundle in the browser. After the JavaScript loads, React attaches event listeners and logic to the existing HTML. This process of connecting React with the already rendered HTML is called Hydration. 👉 In simple words: Hydration = React making server-rendered HTML interactive. ⚠️ Why does a Hydration Error happen? A hydration error happens when the HTML generated on the server is different from what React renders on the client. React tries to match both versions of the UI. If they don’t match, React throws a hydration error. Common reasons include: • Using Math.random() during rendering • Using Date.now() • Rendering content that depends on window or browser APIs • Conditional rendering that behaves differently on server and client 💡 Key Takeaway When working with SSR frameworks like Next.js, the initial UI generated on the server and the client must be the same. Otherwise, React cannot hydrate the page correctly. 💬 Have you ever faced a hydration error while working with React or Next.js? #React #NextJS #FrontendDevelopment #WebDevelopment #JavaScript #SoftwareEngineering #ReactJS #Coding #TechLearning

Interesting comparison between HTMX and React while implementing the same feature 👀 The article shows how a relatively simple UI feature took 3 days in React but only 3 hours using HTMX ⏱️ It’s a good reminder that technology choices can significantly affect complexity and development time. Sometimes a simpler approach can solve the problem more efficiently than adding additional abstraction layers. It also raises interesting questions about when complexity is actually necessary in system design. Curious to see how approaches like HTMX evolve alongside traditional frontend frameworks. 💡 Always interesting to see how different tools approach the same problem. #webdevelopment #softwareengineering #javascript #frontend #backend https://lnkd.in/ecpfhWgW