iiinova — where your digital self keeps evolving

Faisal Akbar @faisalakbar.bsky.social · 22/01/2025

💡JavaScript Tips: Remove duplicates using Set: const unique = [...new Set([1, 2, 2, 3, 3, 4])] // [1, 2, 3, 4]

Faisal Akbar @faisalakbar.bsky.social · 19/01/2025

💡JavaScript Tips: Optional Chaining for Safe Property Access const user = { address: { street: "123 Main St" } } // Old way const street = user && user.address && user.address.street // Modern way const street = user?.address?.street

001

Faisal Akbar @faisalakbar.bsky.social · 18/01/2025

💡JavaScript Tips: Nullish Coalescing vs Logical OR

030

Faisal Akbar @faisalakbar.bsky.social · 05/01/2025

🚀 Understanding Stack Data Structure A Stack is a linear data structure that follows LIFO (Last In First Out). Think of it like a stack of plates - you can only: 1. Add (push) a plate to the top 2. Remove (pop) a plate from the top 3. Look at (peek) the top plate without removing it

100

Faisal Akbar @faisalakbar.bsky.social · 02/01/2025

Explanation of cn utility function from #shadcn/ui The cn function combines two popular utilities: 1️⃣ clsx - For conditionally joining CSS class names 2️⃣ tailwind-merge - For merging Tailwind CSS classes intelligently, removing conflicts

120

Faisal Akbar @faisalakbar.bsky.social · 30/12/2024

🚀 useTransition() - The performance hook you need: • Non-blocking state updates • Background processing • Loading state management • Concurrent rendering ready #react

000

Faisal Akbar @faisalakbar.bsky.social · 29/12/2024

🎯 useEffect Cleanup Cheatsheet: • Timers: clearInterval • Events: removeEventListener • Subscriptions: unsubscribe • Connections: disconnect • API: cancel request 🚀 Why useEffect Cleanup? No cleanup = Memory leaks Missing cleanup = Bugs Bad cleanup = Weird behavior #ReactJS #javascript

021

Faisal Akbar @faisalakbar.bsky.social · 28/12/2024

🚀 React Hooks: useEffect vs useLayoutEffect useEffect: • Runs after paint • Async, non-blocking • Use for: data fetching, subscriptions • Default choice for most cases useLayoutEffect: • Runs before paint • Sync, blocking • Use for: DOM measurements, preventing flickers • Performance sensitive

020

Faisal Akbar @faisalakbar.bsky.social · 27/12/2024

🎯 Let's understand useEffect's dependency array in React:

110

Faisal Akbar @faisalakbar.bsky.social · 27/12/2024

🎯 useEffect() Simplified: // Run once useEffect(() => {}, []) // Run on changes useEffect(() => {}, [data]) // Run & cleanup useEffect(() => { return () => cleanup() }, []) No magic, just timing! #ReactJS #javascript

161

Faisal Akbar @faisalakbar.bsky.social · 26/12/2024

🔍 useRef() Cheat Sheet: const ref = useRef(initialValue) 3 Things to Remember: • It's mutable (ref.current) • Changes are instant • Won't trigger re-renders Perfect for: 📍 DOM references ⏱️ Timers 🗃️ Previous values #React #JavaScript

110

Faisal Akbar @faisalakbar.bsky.social · 26/12/2024

🎓 React useState() Cheatsheet: const [data, setData] = useState(initialValue) 3 Rules to Remember: 1. State updates trigger re-renders 2. State updates are async 3. Previous state? Use callback: setData(prev => prev + 1) #react #javascript

000

Faisal Akbar @faisalakbar.bsky.social · 25/12/2024

🧸 useState() explained to a 5-year-old: It's like a toy box: - box = your state - toys = your data - replacing toys = setState When you put in new toys (setState), React shows everyone your new toys (re-render)! #React

000

Faisal Akbar @faisalakbar.bsky.social · 25/12/2024

🪝 React Hooks Explained Simply: useCallback vs useMemo useCallback: Memoizes a FUNCTION const fn = useCallback(() => doSomething(), [deps]) useMemo: Memoizes a VALUE const value = useMemo(() => computeValue(), [deps]) #React #JavaScript

020

Faisal Akbar @faisalakbar.bsky.social · 24/12/2024

📝 Tech Interview Prep: Key difference: Pass by Value - Function can't modify original (primitive types) Pass by Reference - Function can modify original (reference types)

000

Faisal Akbar @faisalakbar.bsky.social · 21/12/2024

🌐 JavaScript Pro Tip: Stop concatenating currency symbols! Use Intl.NumberFormat for proper formatting: #javascript #webdev

010

Faisal Akbar @faisalakbar.bsky.social · 16/12/2024

JavaScript Tip 💡: Two ways to group by JavaScript with zero dependencies: ✅ using reduce() ✅ using Object.groupBy()

010

Faisal Akbar @faisalakbar.bsky.social · 11/12/2024

💡JavaScript Tip: map() is an array method in JavaScript that: - Creates a new array - Transforms each element of the original array - Returns a new array of the same length - Does NOT modify the original array

000

Faisal Akbar @faisalakbar.bsky.social · 07/12/2024

JavaScript Pro Tip: Object Destructing

100

Faisal Akbar @faisalakbar.bsky.social · 06/12/2024

What will be the outputs of the following JavaScript code and why?

010