Where to put images in React: public/ or src/assets/

🚀 Mastering JavaScript Design Patterns in React.js Learning how JavaScript design patterns work in React.js helps you write clean, easy-to-manage and scalable code. Patterns like Module, Singleton, Factory, Observer, Proxy, Prototype and Decorator each have their own purpose — helping your React app stay well-organized, manage state better and handle components more efficiently. #JavaScript #ReactJS #DesignPatterns #WebDevelopment #Frontend #CleanCode

I've had the pleasure of working with a wide range of frontend tools throughout my career, from the speed and efficiency of React (which remains my personal favorite for building complex UIs) to the elegance of Vue.js. I've also navigated older stacks, dealing with server-rendered GSPs (Grails) and the imperative, DOM-heavy world of jQuery. This experience taught me a foundational lesson: The biggest bottleneck in a project is rarely the framework. A great developer can deliver clean, maintainable, reusable, and scalable code using almost any tool — even vanilla JavaScript. Conversely, a poor understanding of Clean Code or software architecture principles will create chaos, regardless of whether you're using React’s latest features or a simple jQuery script. Frameworks change every few years, but the core principles of software engineering remain constant. Which principle do you believe has a greater impact on code quality: the framework chosen or the discipline of the development team? Let's discuss! #FrontendEngineering #React #VueJS #CleanCode #SoftwareEngineering

🧩 Today I built a small but powerful custom React hook: useDocumentReadyState() It lets you detect when the document is fully loaded, something that’s surprisingly useful in modern apps like Next.js or PWAs. 🔍 Here’s what it does: • Tracks if the document is ready using useState • Listens to the readystatechange event • Cleans up automatically when unmounted 💡 Use cases: • Running code safely after the DOM is ready • Avoiding hydration issues in Next.js • Displaying loaders or initializing animations only when needed It’s simple, efficient, and helps keep things clean in client-side logic. Curious to hear — how do you usually handle “DOM ready” states in your projects? 👇 #React #NextJS #WebDev #PWA #Frontend #DevTips #JavaScript

Ever feel like your React components are getting too cluttered with state and effects? Enter **React’s useReducer hook** — the unsung hero for managing complex state logic! 🎉 Instead of juggling multiple useState calls, useReducer lets you centralize your state updates in one place, making your code cleaner and easier to debug. It works just like Redux but right inside your component without extra setup! Pro tip: Combine useReducer with Context API for scalable and maintainable state management in medium to large apps. Your future self will thank you 😉 Ready to simplify your state? Try it out and watch your React skills level up! #ReactJS #ReactHooks #WebDevelopment #JavaScript #Frontend #CodingTips #DevCommunity

🚀 Features of React That Make It a Developer Favorite! React continues to dominate the frontend ecosystem — and for good reason. Its powerful features help developers build fast, scalable, and interactive user interfaces with ease. Here are some of the standout features highlighted in the image: ✨ Virtual DOM ✨ JSX ✨ One-way data binding ✨ React Native ✨ Declarative UI ✨ Component-based architecture ✨ Speed & efficiency ✨ Flexibility Whether you're building a small project or a large-scale application, React provides the tools and performance needed to deliver exceptional user experiences. 💡 What’s your favorite React feature? Share your thoughts below! #ReactJS #WebDevelopment #Frontend #JavaScript #Programming #Tech

React 19.2 just dropped a new <𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝘆> component. Let’s explore what it can do: <𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝘆> is a React component that lets you 𝗵𝗶𝗱𝗲/𝘀𝗵𝗼𝘄 UI components while 𝗽𝗿𝗲𝘀𝗲𝗿𝘃𝗶𝗻𝗴 𝘁𝗵𝗲𝗶𝗿 𝗶𝗻𝘁𝗲𝗿𝗻𝗮𝗹 𝘀𝘁𝗮𝘁𝗲. Instead of completely unmounting components (which destroys their state), it uses 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝗻𝗼𝗻𝗲 to hide them. 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀: 𝟭. 𝗦𝘁𝗮𝘁𝗲 𝗣𝗿𝗲𝘀𝗲𝗿𝘃𝗮𝘁𝗶𝗼𝗻: When hidden, components keep their React state (like form inputs, expanded sections, etc.) 𝟮. 𝗗𝗢𝗠 𝗣𝗿𝗲𝘀𝗲𝗿𝘃𝗮𝘁𝗶𝗼𝗻: The actual DOM elements stay in the tree, so things like video timecodes or textarea content are maintained 𝟯. 𝗘𝗳𝗳𝗲𝗰𝘁 𝗖𝗹𝗲𝗮𝗻𝘂𝗽: Hidden components have their Effects cleaned up (no active subscriptions), but Effects restart when shown again 𝟰. 𝗣𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴: Hidden components can pre-render at low priority to speed up future interactions 𝗕𝗮𝘀𝗶𝗰 𝗨𝘀𝗮𝗴𝗲: <Activity mode={isVisible ? "visible" : "hidden"}> <MyComponent /> </Activity> 𝗠𝗮𝗶𝗻 𝗨𝘀𝗲 𝗖𝗮𝘀𝗲𝘀: 1. Tab interfaces - Keep form data when switching tabs 2. Sidebars - Preserve expanded/collapsed state 3. Pre-loading - Render heavy components in background 4. Performance - Improve hydration by splitting component tree 𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗡𝗼𝘁𝗲𝘀: - Hidden components still re-render (at lower priority) - Effects are cleaned up when hidden, restarted when shown - DOM side effects (like playing videos) persist unless you add cleanup - Works great with Suspense for data fetching 𝗖𝗼𝗺𝗺𝗼𝗻 𝗚𝗼𝘁𝗰𝗵𝗮: If you have DOM elements with side effects (video, audio, iframe), you need to add cleanup Effects to pause them when hidden: useLayoutEffect(() => { return () => videoRef.current.pause(); }, []); It's basically a smarter way to show/hide components. #Nextjs #Reactjs #ReactNative #JavaScript #WebDevelopment #Frontend #FullStack #TypeScript #Programming #Tech #SoftwareEngineer #DevCommunity

🚀 Just dropped a quick React video! Ever wondered what components and props really do in React? I finally made it simple — no jargon, just code 💻 In this 5-minute crash course, I break down React components and props — the secret to reusable and dynamic UI design. 🎥 Watch the full video here 👉 https://lnkd.in/dxfG9-VD Let me know what you think or drop a comment 💬 if you’d like me to cover React hooks next! #React #ReactJS #Frontend #WebDevelopment #JavaScript #Learning #UCodex #Developers

React Hooks: The Shift That Simplified Frontend Development React Hooks didn’t just change syntax. They changed how developers think about building user interfaces. For years, managing state and lifecycle events meant relying on class components, this.state, and layers of boilerplate. Hooks introduced a cleaner approach by letting developers manage logic directly inside functional components. Instead of spreading logic across componentDidMount, componentDidUpdate, and cleanup methods, a single useEffect can now handle it all. This structure makes code more predictable, reusable, and easier to maintain. The real value of Hooks is not just simplicity, but the mindset shift they introduced, toward modular, functional, and scalable design. #React #Frontend #JavaScript #WebDevelopment #ReactHooks

🚀 Mastering useReducer in React When working with React’s useReducer hook, developers often face tricky issues that can break state logic or cause unexpected re-renders. 👉 Here are some common mistakes you should watch out for 👇 1️⃣ Dispatching an action, but the screen doesn’t update. 2️⃣ A part of the reducer state becomes undefined after dispatching. 3️⃣ The entire reducer state becomes undefined after dispatching. 4️⃣ Error: “Too many re-renders.” 5️⃣ The reducer or initializer function runs twice Let’s write clean, predictable state logic 💪 #ReactJS #ReactHooks #useReducer #CommonMistake #WebDevelopment #Frontend #JavaScript