React Native 0.85 Released with Performance Boost and New Features

useEffect can cause you side effects. I've seen people with months of React experience still getting burned by it. This is Post 8 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. 🔹 It doesn't run when you think it does. Most devs assume useEffect runs during render. It doesn't. It fires AFTER the render and AFTER the browser paints. React keeps the render phase pure and side-effect free on purpose. 🔹 The dependency array controls everything. This one argument decides when your effect runs. No array → runs after EVERY render [ ] empty → runs once on mount [dep] → runs when that value changes Get this wrong → bugs that are nearly impossible to debug. 🔹 [ ] is often a lie. Everyone slaps [] thinking "run once and forget." But if you're using any variable from inside the component and not declaring it as a dep — that's a stale closure. A hidden bug that silently uses outdated data. 🔹 Missing deps → infinite loops. useEffect with no dep array + a setState inside? That's: render → effect fires → state updates → re-render → effect fires again… Infinite loop. Your app crashes. You panic. 🔹 Cleanup is NOT optional. Every event listener, timer, interval, or subscription you create inside useEffect needs to be cleaned up. No cleanup → memory leaks grow silently in the background. 🔹 Stop overusing it. useEffect is for syncing with external systems. Not for everything. Deriving state, transforming data, computing values. None of that needs useEffect. Ask yourself before writing it: "Is this syncing with something outside React?" If no → you probably don't need it. Next post : State vs Ref vs Variable Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: React hooks hate you for this: https://lnkd.in/d7ySVnJA #React #ReactJS #WebDevelopment #Frontend #JavaScript #useEffect #BuildInPublic #LearnInPublic #FrontendDevelopment #ReactUnderTheHood #DevTips #WebDev #Programming

🚀 JavaScript Learning Journey — From UI Behavior to Real User Interaction I have been continuing my approach of learning JavaScript by building small, small structured UI systems — focusing on how state drives the interface. This time, I built a Live Character Counter. But I did not stop at counting characters. I focused on making it behave like a real product: → Enforcing a character limit → Providing dynamic feedback as yours type → Handling edge cases like "1 character" vs "2 characters" → Giving clear visual warnings at the limit → And most importantly — allowing users to actually send feedback (integrated with Formspree) 👉 This shifted my thinking again: Instead of just "updating the UI", I am now thinking in terms of: How does the system guide the user and handle real interaction? Below is the live demo and code: 🔗 Live (project): https://lnkd.in/dfkBnr2X 💻 Code: https://lnkd.in/dDA8u28H 🌐 Explore all projects: https://lnkd.in/dt94TTW5 I would genuinely appreciate any feedback — your message will reach me directly through the app. #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Understanding Project Folder Structure If you're starting with React or Full-Stack development, knowing the folder structure is very important. Here’s a simple breakdown 👇 📁 src/ Main folder where all your application code lives 👉 Components, pages, logic, styles 📁 assets/ Used for storing static files 👉 Images, icons, fonts, videos 📁 components/ Reusable UI parts 👉 Navbar, Footer, Buttons, Cards 📁 pages/ Represents different screens of your app 👉 Home, About, Contact 📁 api/ Handles backend communication 👉 Fetching and sending data 📁 utils/ Helper functions used across the app 👉 Date format, validations, calculations 📁 hooks/ Custom React hooks 👉 Reusable logic (useAuth, useFetch) 📁 context/ Global state management 👉 Share data across components 💡 Clean folder structure = Clean and scalable code #ReactJS #WebDevelopment #FullStack #JavaScript #Coding #Developers #Programming

🚀 Understanding Project Folder Structure If you're starting with React or Full-Stack development, knowing the folder structure is very important. Here’s a simple breakdown 👇 📁 src/ Main folder where all your application code lives 👉 Components, pages, logic, styles 📁 assets/ Used for storing static files 👉 Images, icons, fonts, videos 📁 components/ Reusable UI parts 👉 Navbar, Footer, Buttons, Cards 📁 pages/ Represents different screens of your app 👉 Home, About, Contact 📁 api/ Handles backend communication 👉 Fetching and sending data 📁 utils/ Helper functions used across the app 👉 Date format, validations, calculations 📁 hooks/ Custom React hooks 👉 Reusable logic (useAuth, useFetch) 📁 context/ Global state management 👉 Share data across components 💡 Clean folder structure = Clean and scalable code #ReactJS #WebDevelopment #FullStack #JavaScript #Coding #Developers #Programming

🚀 Understanding Project Folder Structure If you're starting with React or Full-Stack development, knowing the folder structure is very important. Here’s a simple breakdown 👇 📁 src/ Main folder where all your application code lives 👉 Components, pages, logic, styles 📁 assets/ Used for storing static files 👉 Images, icons, fonts, videos 📁 components/ Reusable UI parts 👉 Navbar, Footer, Buttons, Cards 📁 pages/ Represents different screens of your app 👉 Home, About, Contact 📁 api/ Handles backend communication 👉 Fetching and sending data 📁 utils/ Helper functions used across the app 👉 Date format, validations, calculations 📁 hooks/ Custom React hooks 👉 Reusable logic (useAuth, useFetch) 📁 context/ Global state management 👉 Share data across components 💡 Clean folder structure = Clean and scalable code #ReactJS #WebDevelopment #FullStack #JavaScript #Coding #Developers #Programming

Recently, I revisited some of my earlier React projects and decided to finally share them. Here are a few projects I built while learning: 🔹 To-Do List App A modern task manager with drag-and-drop, dark mode, filtering, and local storage support. 🔹 Weather Dashboard Fetches real-time weather data (temperature, wind speed, conditions) using OpenWeather API. 🔹 FlipMind A card-matching game with smooth animations and responsive design. 🔹 QuoteCraft A minimal quote generator with a clean and simple UI. These projects helped me strengthen my fundamentals in React, state management, and working with APIs. Links are in the comments 👇. #React #WebDevelopment #FrontendDevelopment #JavaScript #LearningJourney

I recently completed a project focused on building and enhancing a Simple Todos app. This project was a great way to dive deeper into React state management, conditional rendering, and dynamic UI updates. Key features I implemented: ✅ Dynamic Task Creation: Added a text input and "Add" button to create tasks on the fly. ✅ Bulk Task Entry: Built a smart "Multi-Add" feature automatically generates three separate entries. ✅ In-Place Editing: Implemented an "Edit/Save" toggle for each item, allowing users to update titles without leaving the list. ✅ Task Completion: Added checkboxes with a persistent strike-through effect to track progress. ✅ Stateful Deletion: Ensured a smooth user experience when removing items from the list. This project pushed me to think about component structure, reusable props, and clean UI logic in React. Check out the implementation here: https://lnkd.in/dtG46cwU #Day97 #ReactJS #WebDevelopment #Frontend #JavaScript #CodingProject #LearnToCode #ReactComponents #NodeJS #ExpressJS #BackendDevelopment #WebDevelopment #NxtWave #LearningJourney #TechAchievement

A while back, I noticed something… I was spending way too much time filling the same forms over and over again while testing my projects. Names. Emails. Passwords. Every. Single. Time. At first, I ignored it… but it started slowing me down more than I liked. So I did what most developers do when something gets annoying enough…… I built a solution. That’s how AutoFormX was born. It’s a browser extension that autofills forms instantly, so you can focus on building instead of repetitive typing. 🚀 What it does: • Autofills forms in seconds • Saves reusable test data • Works across different websites • Speeds up development workflow 💡 What I learned: Sometimes the best projects don’t come from big ideas… They come from small frustrations you face every day. 🛠️ Built with: • TypeScript • Next.js • Tailwind CSS • Browser Extension APIs (WXT) 📹 I’ve attached a demo showing how it works. 🔗 Try it here: https://lnkd.in/dNqeGzj4 I’m still improving it, so I’d genuinely love feedback. If you’ve ever built and tested forms… you’ll get why I made this. #buildinpublic #webdevelopment #javascript #productivity #developers #sideproject

Today, while working on a feature, I stumbled upon an interesting concept — 𝘁𝗵𝗲 𝗕𝗿𝗼𝗮𝗱𝗰𝗮𝘀𝘁𝗖𝗵𝗮𝗻𝗻𝗲𝗹 𝗔𝗣𝗜 — and it made me rethink how communication between browser tabs works. Imagine having multiple tabs of the same application open and keeping them perfectly in sync… in real time. 𝗡𝗼 𝗿𝗲𝗳𝗿𝗲𝘀𝗵. 𝗡𝗼 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹𝘀. 𝗝𝘂𝘀𝘁 𝘀𝗲𝗮𝗺𝗹𝗲𝘀𝘀 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝗰𝗮𝘁𝗶𝗼𝗻. That’s exactly what 𝗕𝗿𝗼𝗮𝗱𝗰𝗮𝘀𝘁𝗖𝗵𝗮𝗻𝗻𝗲𝗹 enables. 🔍 While integrating it with React, a few things stood out: • Effortless communication between multiple tabs/windows • Keeping state consistently in sync across sessions • Reducing backend dependency for UI state updates ✨ What made it even more interesting was how naturally it fits into React’s state management — making the UI respond instantly across tabs without added complexity. 🚀 Some practical use cases: • Syncing login/logout state across tabs • Real-time notifications • Multi-window dashboards or collaborative workflows ⚡ It’s always exciting to discover browser-native APIs that can elevate user experience with such minimal effort. Sometimes, the best solutions aren’t new libraries… they’re already built into the platform — just waiting to be explored. 💭 Curious to hear from you: How have you handled multi-tab state synchronization in your applications? #ReactJS #JavaScript #FrontendDevelopment #WebAPIs #BroadcastChannel #StateManagement #MultiTabSync #SoftwareEngineering #LearningInPublic #DeveloperJourney #TechCommunity #Programming #Innovation

useEffect in React should be treated as a last resort rather than a default solution. While not literally banned, its frequent usage in real codebases often falls into three categories: syncing derived state, handling user actions, and transforming data for rendering. However, these scenarios typically do not require useEffect. Instead, they can usually be addressed through: - Derived values during render - Syncing state in event handlers - Utilizing global state useEffect was intended for side effects such as network requests and subscriptions. The misuse of useEffect can lead to complications like double execution in strict mode, difficult data flow, bugs that surface later, and unreadable code. The key shift for me has been simple: before writing an effect, I ask, “Can I do this during render instead?” More often than not, the answer is yes. While useEffect can be useful, its overuse is a potential red flag. #react #frontend #javascript