Faisal Akbar

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

💡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

💡JavaScript Tips:
Nullish Coalescing vs Logical OR

Common use cases for stacks include:
- Function call management (call stack)
- Undo/Redo operations
- Expression evaluation
- Browser history
- Syntax parsing

The implementation I provided includes all basic stack operations:
- push(): Add element to top
- pop(): Remove and return top element
- peek(): View top element without removing
- isEmpty(): Check if stack is empty
- getSize(): Get number of elements
- clear(): Remove all elements

Implementation of stack using JavaScript:

Key characteristics of a stack:
- Items can only be added/removed from one end (the top)
- The last element added is the first one to be removed
- Access to elements in the middle is not allowed

🚀 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

Key benefits:
● Building reusable components with default styles
● Allowing style overrides via props
● Handling conditional classes
● Ensuring Tailwind classes don't conflict

Here's a practical example:

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

🚀 useTransition() - The performance hook you need:

• Non-blocking state updates
• Background processing
• Loading state management
• Concurrent rendering ready

#react

🎯 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

🚀 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

I use carbon.now.sh

It depends, useEffect without deps is perfectly fine if you're not updating state. It will run after every render - that's sometimes exactly what you want. Here are some example:

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

It’s simple, you just need to understand what and when to use dependencies:

🎯 useEffect() Simplified:

// Run once
useEffect(() => {}, [])

// Run on changes
useEffect(() => {}, [data])

// Run & cleanup
useEffect(() => {
return () => cleanup()
}, [])

No magic, just timing!

#ReactJS #javascript

Yes those are most common use cases.

🔍 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

🎓 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

🧸 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

🪝 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

📝 Tech Interview Prep:

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

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

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

💡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