Md. Abdul Goni Rabbee’s Post

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

A lot of people constantly ask me what React Hooks actually are, and the best way to think about Hooks and JavaScript concepts in general is to look at what problem they were trying to fix. For example, before React Hooks, people would create a Container Component and a Presentational Component. The Container Component would retrieve data, like making a fetch request, and then pass that data down to the Presentational Component, which was usually a pure function that returned some UI, like a div with styling, and accepted that data as props. This pattern helped create a standard for how data was retrieved in React and enforced separation of concerns, but it ended up being too boilerplate heavy for most people. So Hooks were introduced to let us hook into components directly, allowing us to load data as a side effect inside a function while still maintaining separation of concerns without needing extra components. #ReactJs #JavaScript #JavaScriptHooks

💡 #JavaScript Global vs Local Variables (Simple Explanation) If you're learning JavaScript, understanding variable scope is a must 👇 🔹 Global Variables Declared outside any function Accessible from anywhere in your code Can be used across multiple functions Example: var name = "Avi"; function greet() { console.log(name); // Accessible here } 🔹 Local Variables Declared inside a function or block Accessible only within that function/block Helps avoid unwanted changes from outside Example: function greet() { var message = "Hello"; console.log(message); // Works here } console.log(message); // ❌ Error ⚡ Key Difference Global = accessible everywhere Local = accessible only inside its scope 👉 Tip: Prefer #local variables to keep your code clean and avoid bugs. Use #global where multiple parts of your app need the same value. #frontend #js #javascript

🚨 Small React mistake… big headache 👇 I used to write code like this without even thinking: if (condition) return null; useEffect(() => { // logic }, []); It looks completely fine, right? I thought the same ❌ Then suddenly this error shows up: 👉 "Rendered fewer hooks than expected" Took me some time to realize what was actually wrong. React expects hooks to run in the same order every single render. But in this case: • First render → component returns early → useEffect doesn’t run • Next render → useEffect runs And boom 💥 React gets confused because the order changed. The fix is simple (but easy to forget): useEffect(() => { // logic }, []); if (condition) return null; Now hooks always run first, no matter what 👍 💡 Lesson learned: Never put hooks after a condition or inside it. Always keep them at the top. Have you ever hit this error? It’s one of those bugs that looks small but wastes a lot of time 😅 #react #nextjs #javascript #frontend #webdev

🚨 I see developers jumping straight into React and Next.js — and struggling to debug the simplest bugs. Here's the uncomfortable truth: 👉 React is just JavaScript. 👉 Next.js is just JavaScript. 👉 Every framework you'll ever use... is just JavaScript. If your JS fundamentals are weak, you're building on sand. 🏚️ Here's what actually happens when you skip the basics: ❌ You copy-paste code without understanding it ❌ You can't debug — only Google ❌ Every new framework feels like starting from zero But when you master JS fundamentals first: ✅ Closures → you understand React hooks ✅ Event loop → you understand async/await & API calls ✅ Prototypes → you understand how JS objects really work ✅ Array methods → you write cleaner, readable React components Frameworks come and go. JavaScript stays. Invest time in the fundamentals. Your future self — and your teammates — will thank you. 🙌 ───────────────── 💬 Drop a comment: What JS concept clicked everything into place for you? #JavaScript #WebDevelopment #React #NextJS #Frontend #100DaysOfCode

useEffect — The Hook That Confused Me (Until I Got This) useEffect was confusing until I understood one thing: dependencies control everything. The Rule: javascript // Runs ONCE after mount useEffect(() => { fetchData(); }, []); // Runs when userId changes useEffect(() => { fetchUser(userId); }, [userId]); // Runs on EVERY render (avoid!) useEffect(() => { console.log('render'); }); What I Learned the Hard Way: Missing dependencies = stale data Adding everything = infinite loops Cleanup functions matter (especially for subscriptions) My Checklist: What should trigger this effect? Do I need to clean up? Can this cause unnecessary renders? What's your React Hook survival tip? #ReactJS #JavaScript #FrontendDeveloper #WebDev #CodingTi

🚀 JavaScript Output Challenge #5 (Hoisting Trap) Looks simple… but is it really? 👀 🧠 Question: 👉 What will be printed in the console? ⚠️ Don’t run the code. Try to think about: Hoisting Function declaration vs variable declaration Execution context 🤔 Bonus: Why does JavaScript behave this way internally? 💬 Drop your output + reasoning in comments Let’s see who understands JavaScript deeply 🔥 📌 Detailed explanation coming soon... #javascript #webdevelopment #frontend #codingchallenge #reactjs #nodejs

🧠 Day 2 of 21 days challenge JavaScript Closures 🤯 A function remembering its data even after execution is done. In simple words: Inner function can access outer function variables. Sounds simple… but super powerful 💥 Used in: • Counters • Private variables • React hooks 💤 For easy understanding : outer() returns a function inner() remembers the value of count 👉 this is called a closure This changed how I see JavaScript 🚀 #JavaScript #Closures #Frontend #React.js

Hey JavaScript devs 👋 Did you know `this` can silently disappear in 3 very common situations? 1. Detaching a method from its object const fn = obj.greet; fn(); // this → undefined 💀 2. Passing a method as a callback setTimeout(obj.greet, 0); // this → gone [1,2,3].forEach(obj.process); // same story 3. Arrow function in an object literal const obj = {  name: 'Pavel',  greet: () => console.log(this.name) // this → global, not obj }; The fix is always one of three things: `.bind()`, a wrapper arrow function, or class field arrow methods. Which one bit you the hardest? Drop it in the comments 👇 #JavaScript #WebDev #Frontend #JS

Built a to-do app with a glassmorphic UI as a mini project. Kept it simple — vanilla HTML, CSS, and JS. No frameworks. A few things I learned along the way: — Local Storage API to persist tasks on refresh — DOM manipulation with vanilla JS — How CSS backdrop-filter actually works for the glass effect — JSON.stringify and JSON.parse for saving arrays Small project but learned a lot from it. More coming. repo link: https://lnkd.in/dEtj35Us #WebDev #JavaScript #Frontend #BuildInPublic