React Hooks: useMemo and useCallback Optimization

I noticed I was repeating the same API logic in multiple React components. useEffect, useState, loading state, error handling… again and again. It worked, but it didn’t feel right. So I tried moving that logic into a custom hook. Example: function useUserData() {  const [data, setData] = useState(null);  const [loading, setLoading] = useState(true);  useEffect(() => {   fetch('/api/user')    .then(res => res.json())    .then(data => {     setData(data);     setLoading(false);    });  }, []); return { data, loading }; } Now I can reuse it anywhere: const { data, loading } = useUserData(); -No repeated logic. -Cleaner components. -Easier to maintain. Still learning, but custom hooks made my code feel much more structured. #reactjs #webdevelopment #frontend #javascript

⚛️ React Performance Tip: Stop Recomputing on Every Render A common mistake in React is recalculating data on every render: ```javascript id="s7dh2k" const processedData = data.map(...); ``` ❌ This runs every time the component re-renders ❌ Leads to unnecessary computation and slower UI Instead, memoize it using `useMemo`: ```javascript id="k39xdl" const processedData = useMemo(() => { return data.map(...); }, [data]); ``` ✅ Runs only when `data` changes ✅ Prevents unnecessary recalculations ✅ Improves performance significantly 💡 Key takeaway: Use `useMemo` when: • Expensive computations • Large datasets • Avoiding repeated work 🚀 Small optimization = big performance boost What’s your go-to React performance trick? #ReactJS #JavaScript #Frontend #Performance #WebDevelopment #Coding

You’re still building forms manually from JSON? --- Every time I get a JSON response, I end up doing the same thing: → read structure → map fields → wire inputs → repeat… again --- It’s boring. It’s repetitive. And it shouldn’t exist in 2026. --- So I built something for myself: 👉 Paste JSON 👉 Get a working form instantly --- No setup. No backend. No config headaches. Just: JSON → UI --- Introducing: 🔧 JSON → Form (part of useSignal) 👉 https://lnkd.in/grSx-SEi --- It’s fully browser-native. Which means: - your data never leaves your machine - everything runs instantly - no dependency on any service --- This isn’t just a generator. It’s a way to: → skip repetitive UI work → prototype faster → actually focus on logic --- Try it once. You probably won’t go back to building forms manually. --- 💬 Curious — how are you handling JSON → forms today? #frontend #webdevelopment #javascript #reactjs #devtools #buildinpublic #productivity #developers #webdev

Day 22 #100DaysOfCode 💻 1. Difference between map and filter? — B. map transforms, filter selects 2. What triggers this? (addEventListener) — B. Button click 3. What happens here? (onclick) — B. Runs on click 4. What is the output? (map without return) — B. [undefined, undefined, undefined] 5. Which is correct to get input value? — B. value 6. What is the output? (array.find) — B. 2 7. What does async/await simplify? — B. Callbacks 8. What is the output? (array.filter) — B. [3, 4] 9. Which is best for spacing between flex items? — B. gap 10. What does querySelector do? — B. First match 11. Layout direction (Tailwind flex-col md:flex-row) — B. Column on small, row on medium+ 12. Why does map return undefined? — B. Missing return 13. What does JSON.stringify() do? — A. Converts object to string 14. What does Array.push() do? — A. Adds element to the end 15. What is the use of the spread operator (...) ? — C. Copying or merging arrays/objects 16. How to save data in LocalStorage? — B. setItem('key', 'value') 17. Difference between const and let — A. const cannot be reassigned 18. == vs === — B. === checks both value and type 19. What is the output of typeof null? — C. "object" 20. What is Hoisting? — A. Moving declarations to the top 21. Why is useState used in React? — B. To manage component state 22. What does p-4 mean in Tailwind? — A. Padding on all sides 23. What does Array.reduce() do? — B. Accumulate values to a single result 24. Why use event.preventDefault()? — A. Stops default browser behavior 25. Which method does fetch() use by default? — A. GET 🚀 #javascript #reactjs #webdevelopment #frontenddeveloper #coding #learninginpublic #Akbiplob

I just published a new open-source library: input-mask. I built it because input masking on the frontend often feels more annoying than it should be, especially in simple projects, forms, landing pages, and workflows where you just want to configure the field and move on. The idea is straightforward: apply input masks using HTML attributes only, without needing to write JavaScript just to initialize everything. You add the library via CDN, use attributes like data-mask="pattern" or data-mask="currency" on the input, and it handles the rest. Under the hood it uses IMask, but the whole point was to hide that complexity and make the implementation much more accessible. The first public version already supports: • pattern • regex • number • currency • date Repo: https://lnkd.in/e6pkj7wB CDN: https://lnkd.in/ebc7fdr5 If anyone wants to try it, share feedback, or suggest improvements, I’d love to hear it. #javascript #frontend #webdev #opensource #forms #nocode

Most developers reach for an array by default. But sometimes, that's the wrong tool. When you use array.find() to look up a value, it scans from the start every single time. That's O(n) time complexity. With 10 items, unnoticeable. With 10,000 items, your server feels it. A Map object solves this. Instead of this: const user = users.find(u => u.id === id) Do this: const userMap = new Map(users.map(u => [u.id, u])) const user = userMap.get(id) Map lookups are O(1). It doesn't matter if you have 10 items or 10 million, the lookup time stays the same. This only makes sense when you have a fixed dataset and are doing repeated lookups. If you're looking up once, array.find() is perfectly fine. But if you're hitting that array multiple times, consider reaching for a Map instead. #JavaScript #NodeJS #SoftwareEngineering #WebDevelopment #Performance

Many developers confuse slice() and splice() in JavaScript. The difference is simple but important. 1️⃣ slice() — Creates a copy slice() returns a portion of an array without changing the original array. Example: const numbers = [10, 20, 30, 40, 50] const result = numbers.slice(1, 4) Result → [20, 30, 40] Original → [10, 20, 30, 40, 50] Use it when you want to extract data safely without modifying the source array. 2️⃣ splice() - Modifies the array splice() changes the original array. It can remove, add, or replace elements. Example 1 - Remove items: const numbers = [10, 20, 30, 40, 50] numbers.splice(2, 2) Result → [10, 20, 50] It removed 30 and 40 from the original array. Example 2 - Add Items : constnumbers= [10, 20, 50]; numbers.splice(2, 0, 30, 40); console.log(numbers); // [10, 20, 30, 40, 50] Explanation: It Start at index 2, Remove 0 items and Insert 30 and 40 Key Difference slice() → non-destructive (does not modify the array) splice() → destructive (modifies the array) Quick rule to remember slice → copy splice → change Understanding this small difference prevents many bugs, especially when working with React state and immutable data patterns. #javascript #webdevelopment #frontend #reactjs #programming

JavaScript 𝗮𝗿𝗿𝗮𝘆𝘀 come with powerful built-in methods, but I used to just 𝗺𝗲𝗺𝗼𝗿𝗶𝘇𝗲 them. Things changed when I understood one simple idea Each method solves a specific kind of problem. For example, 𝗳𝗼𝗿𝗘𝗮𝗰𝗵() lets you run a function on every element: const numbers = [1, 2, 3, 4]; numbers.𝗳𝗼𝗿𝗘𝗮𝗰𝗵(num => console.log(num * 2));  // Output: 2 4 6 8 Instead of reading more, I built a small project 🎯 𝗔𝗿𝗿𝗮𝘆 𝗠𝗲𝘁𝗵𝗼𝗱𝘀 𝗘𝘅𝗽𝗹𝗼𝗿𝗲𝗿 Click a number Try different methods See what actually happens 🌐 Live Demo: https://lnkd.in/gNyt8cqT 💻 Code: https://lnkd.in/gUV5R5rs 💡 What it covers: • 𝗽𝘂𝘀𝗵() / 𝗽𝗼𝗽() → add/remove (end) • 𝘀𝗵𝗶𝗳𝘁() / 𝘂𝗻𝘀𝗵𝗶𝗳𝘁() → add/remove (start) • 𝗺𝗮𝗽() → transform • 𝗳𝗶𝗹𝘁𝗲𝗿() → select • 𝗿𝗲𝗱𝘂𝗰𝗲() → combine • 𝗳𝗼𝗿𝗘𝗮𝗰𝗵() → iterate ✨ Biggest takeaway: Stop memorizing methods. Start thinking: “𝗪𝗵𝗮𝘁 𝗱𝗼 𝗜 𝘄𝗮𝗻𝘁 𝘁𝗼 𝗱𝗼 𝘄𝗶𝘁𝗵 𝗺𝘆 𝗱𝗮𝘁𝗮?” A big thank you to Sheryians Coding School, Harsh Vandana Sharma, Ankur Prajapati, Sarthak Sharma for the guidance and inspiration 🙌 Built using HTML, CSS & JavaScript 🚀 #JavaScript #WebDevelopment #LearnByBuilding #Frontend #ArraysInJs #Arrays #JavaScriptMastery #LearnByAction

𝐈𝐬 𝐲𝐨𝐮𝐫 `𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭` 𝐟𝐢𝐫𝐢𝐧𝐠 𝐰𝐚𝐲 𝐭𝐨𝐨 𝐨𝐟𝐭𝐞𝐧? 𝐘𝐨𝐮 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐟𝐚𝐥𝐥𝐢𝐧𝐠 𝐟𝐨𝐫 𝐚 𝐜𝐨𝐦𝐦𝐨𝐧 𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲 𝐚𝐫𝐫𝐚𝐲 𝐭𝐫𝐚𝐩. We've all been there: you put an object or array into your `useEffect`'s dependency array, thinking it's stable. But because JavaScript compares objects and arrays by reference, even if their content is identical, `useEffect` sees a new object on every render and re-runs your effect. This can lead to performance hits, stale data, or even infinite loops. 🚫 The Problem: ```javascript function MyComponent({ data }) { const options = { id: data.id, filter: 'active' }; useEffect(() => { // This runs every render if 'options' object is new fetchData(options); }, [options]); // 'options' is a new object reference each time // ... } ``` ✅ The Fix: Stabilize with `useMemo` If your object or array doesn't logically change across renders (or only changes based on specific primitives), wrap it in `useMemo`. This memoizes the object itself, ensuring its reference remains the same unless its dependencies actually change. ```javascript function MyComponent({ data }) { const stableOptions = useMemo(() => ({ id: data.id, filter: 'active' }), [data.id]); // Only re-create if data.id changes useEffect(() => { fetchData(stableOptions); }, [stableOptions]); // Now only re-runs if stableOptions' reference changes // ... } ``` This trick is a lifesaver for optimizing `useEffect` calls, especially when dealing with complex configurations or filtering logic passed down as props. It keeps your effects clean and your app performant. What's been your biggest `useEffect` headache, and how did you solve it? #React #FrontendDevelopment #JavaScript #Performance #WebDev