Azizul Rabby Chowdhury’s Post

The JavaScript "this" Trap 🪤🔥 The Puzzle: What is the output? 🤔 const obj = { name: "JS", getName() { console.log(this.name); } }; const fn = obj.getName; fn(); Output: undefined Why? 🧠 In JavaScript, this depends on HOW a function is called, not where it is written. Lost Context: const fn = obj.getName only copies the function reference. Standalone Call: When you call fn(), there is no object (no dot) before the function. Global Context: It now runs in the Global Context (window object). Since window.name is not "JS", it returns undefined. How to Fix? 🛠️ ✅ Use .bind(): const fn = obj.getName.bind(obj); ✅ Use .call(): fn.call(obj); ✅ Use Arrow Functions: They inherit this from the surrounding scope. Interview Tip: 💡 Always check the "Call Site." No dot before the function call (like fn()) usually means this is lost! #JavaScript #CodingTips #365DaysOfCode #InterviewPrep #WebDev #FullStack #mern #react #node

Another core concept in React is props, short for “properties.” Props are how data moves from one component to another. Think of them as inputs you pass into a component so it can display or use that data. For example, you might have a reusable component that displays a user card. Instead of hardcoding the name or email inside the component, you pass that information in as props. The component stays flexible, and you can reuse it in different places with different data. This pattern is what makes React applications easier to organize. Small components receive data through props, render what they need, and stay focused on a single job. Once you start thinking in terms of components passing data through props, building larger interfaces becomes much more manageable. #reactjs #webdevelopment #frontenddevelopment #javascript #softwaredevelopment

⚛️ React 19 lets you delete your entire handleSubmit function 👇 . The new useActionState hook replaces 3 different useState variables. For a decade, React developers have written the same boilerplate: 1. event.preventDefault() 2. const formData = new FormData(event.target) 3. try / catch blocks for errors. 4. useState for loading indicators. React 19 introduces useActionState. ❌ The Old Way: You manually bridge the gap between the HTML form and your JavaScript logic. It forces you to manage loading states (isLoading) and error states (error) separately. ✅ The Modern Way: Pass your server action (or async function) directly to the hook. React returns: • state: The return value of your last action (perfect for validation errors). • formAction: The function to pass to <form action={...}>. • isPending: A boolean that is true while the action is running. The Shift: Forms are no longer "events to be handled"—they are "actions to be dispatched." #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactJSTips #Tips #FrontendDeveloper #ReactJSDeveloper #Hooks #SoftwareEngineering

⚛️ React 19 lets you delete your entire handleSubmit function 👇 . The new useActionState hook replaces 3 different useState variables. For a decade, React developers have written the same boilerplate: 1. event.preventDefault() 2. const formData = new FormData(event.target) 3. try / catch blocks for errors. 4. useState for loading indicators. React 19 introduces useActionState. ❌ The Old Way: You manually bridge the gap between the HTML form and your JavaScript logic. It forces you to manage loading states (isLoading) and error states (error) separately. ✅ The Modern Way: Pass your server action (or async function) directly to the hook. React returns: • state: The return value of your last action (perfect for validation errors). • formAction: The function to pass to <form action={...}>. • isPending: A boolean that is true while the action is running. The Shift: Forms are no longer "events to be handled"—they are "actions to be dispatched." #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactJSTips #Tips #FrontendDeveloper #ReactJSDeveloper #Hooks #SoftwareEngineering

Day 2: Understanding JSX One of the first concepts you’ll encounter in React is JSX. 📌 What is JSX? JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to write HTML-like code inside JavaScript. It makes React code more readable and easier to write UI components. 📌 Example without JSX const element = React.createElement( 'h1', null, 'Hello React' ); 📌 Example with JSX const element = <h1>Hello React</h1>; As you can see, JSX is much cleaner and easier to understand. 📌 Key Points about JSX ✅ Looks like HTML but it is actually JavaScript ✅ JSX must return one parent element ✅ You can use JavaScript expressions inside {} ✅ JSX gets converted into React.createElement() behind the scenes 📌 Example using JavaScript inside JSX const name = "React"; function App() { return <h1>Hello {name}</h1>; } Here {name} is a JavaScript expression inside JSX. #ReactJS #JSX #FrontendDevelopment #JavaScript #WebDevelopment #LearnInPublic

⚛️ In React, these three onClick patterns look almost identical… but behave very differently. onClick={handleAddItem} onClick={handleAddItem(item)} onClick={() => handleAddItem(item)} At a glance they seem similar, but the execution timing is completely different. 🔹 onClick={handleAddItem} Passes the function reference → runs only when the click event occurs. 🔹 onClick={handleAddItem(item)} Executes immediately during render, not on click. This can lead to unexpected behavior like unnecessary API calls or extra re-renders. 🔹 onClick={() => handleAddItem(item)} Creates a callback function that runs on click and allows you to pass parameters. ✅ Rule of thumb • No parameters → onClick={handleAddItem} • Need parameters → onClick={() => handleAddItem(item)} • Avoid → onClick={handleAddItem(item)} 💡 One more interesting detail Arrow functions create a new function on every render. In most cases this is perfectly fine. However, in large lists or memoized components (React.memo), this can sometimes trigger unnecessary re-renders. That’s why some developers use useCallback or pre-defined handlers for optimization. 👨💻 How do you usually handle this in your projects? Arrow functions, useCallback, or another pattern? #React #JavaScript #FrontendDevelopment

React Hooks: useState vs useRef — Know the Difference When working with React functional components, two commonly used hooks are useState and useRef. While they may seem similar at first, they serve different purposes. -- useState * Used to store and manage component state * When the state updates, React re-renders the component * Ideal for data that affects the UI Example: const [count, setCount] = useState(0); -- useRef * Used to store mutable values that persist across renders * Updating a ref does NOT trigger a re-render * Commonly used for accessing DOM elements or storing previous values Example: const inputRef = useRef(null); -- Simple Rule to Remember: * If the value affects the UI → useState * If the value should persist but not trigger re-render → useRef Mastering these hooks helps you write cleaner and more efficient React components. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #ReactHooks #SoftwareDevelopment

Do you know what is a pure function in JavaScript? When a function does not depend on external data or does not modify the external data then it's known as a pure function. Take a look at the below code: function add(a, b) { return a + b; } This add function is a pure function because it does not depend on any outside variable. It just uses the function parameters and returns a value based on some calculation. So when we call the function with the same arguments again and again we get the same result like this: add(10, 22); // 32 add(10, 22); // 32 That's why it's called a pure function. let sum = 0; function add(a, b) { sum = a + b; return sum; } The above function is not a pure function because even though we're not using the outside value in calculation we're changing the value which is defined outside the function(sum) Creating pure functions ensures that you get a consistent and predictable result without causing any side effects. If you're a React developer then you might know that reducer in redux is a pure function because it just uses the value of state and action and returns a new state without changing the original state. Also, every component you create in React has to be a pure component which means it should not manipulate or change any of the variables declared outside that component. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

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

𝐀𝐫𝐞 𝐲𝐨𝐮𝐫 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐡𝐨𝐨𝐤𝐬 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐰𝐢𝐥𝐝? I just debugged a subtle React re-render loop that comes up more often than you'd think. Here's the trap: When you define an object or array directly inside your component's render function and then pass it as a dependency to `useEffect`. ```javascript function MyComponent() { const settings = { fetchLimit: 10, isActive: true }; useEffect(() => { // This effect will re-run on every render // because `settings` is a new object reference each time. fetchData(settings); }, [settings]); // 🚨 Problem here! // ... } ``` Even if the contents of `settings` are identical, its reference changes on every render. React sees a "new" dependency and re-runs your effect. Hello, infinite loops or wasted API calls! The fix? Stabilize your dependencies. Use `useMemo` if the object/array is derived from other stable props/state, or define it outside the component if it's truly constant. ```javascript function MyComponent() { const settings = useMemo(() => ({ fetchLimit: 10, isActive: true }), []); // ✅ Stabilized! useEffect(() => { fetchData(settings); }, [settings]); // Now `settings` reference is stable // ... } ``` This simple tweak can save a lot of head-scratching and dramatically improve performance. Always remember: `useEffect` compares dependencies by reference, not by value. What's your go-to strategy for taming `useEffect` dependency arrays? Share your tips! #React #Frontend #JavaScript #WebDevelopment #Performance