Ndeye Fatou Diop
LightNews LightNews
banner
ndeyefatoudiop.bsky.social
Ndeye Fatou Diop
@ndeyefatoudiop.bsky.social
190 followers 370 following 910 posts
Senior Frontend Engineer | 5+ years of experience

I share tips to help overwhelmed junior frontend developers 🎉 .

Join for free 👉 https://www.frontendjoy.com/subscribe
Posts Replies Media Videos
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
const expensiveValue = useMemo( () => compute(a, b), [a] );
July 20, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙳𝚊𝚝𝚎.𝚙𝚊𝚛𝚜𝚎() to convert a date string to a timestamp
const timestamp = Date.parse('2025-07-06'); console.log(timestamp); // e.g. 1751760000000
July 19, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
useEffect(() => { const interval = setInterval(doStuff, 1000); return clearInterval(interval); }, []);
July 18, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚕𝚘𝚌𝚊𝚝𝚒𝚘𝚗.𝚛𝚎𝚕𝚘𝚊𝚍() to force reload the current page
// Reloads the browser tab location.reload();
July 17, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
const MyComponent = () => { <div>Hello</div>; };
July 16, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚍𝚎𝚜𝚒𝚐𝚗𝙼𝚘𝚍𝚎 = "𝚘𝚗" to 𝗺𝗮𝗸𝗲 𝗮𝗻𝘆 𝘄𝗲𝗯𝗽𝗮𝗴𝗲 𝗲𝗱𝗶𝘁𝗮𝗯𝗹𝗲 (great for quick mockups or demos)
document.designMode = "on";
July 15, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
useEffect(() => { fetch('/api/user'); setLoaded(true); }, []);
July 14, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙿𝚛𝚘𝚖𝚒𝚜𝚎.𝚛𝚎𝚜𝚘𝚕𝚟𝚎(𝚟𝚊𝚕𝚞𝚎) and 𝙿𝚛𝚘𝚖𝚒𝚜𝚎.𝚛𝚎𝚓𝚎𝚌𝚝(𝚎𝚛𝚛𝚘𝚛) to quickly create resolved or rejected promises.
Promise.resolve(42).then(console.log); // 42
July 13, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
const MyComponent = () => { const inputRef = useRef(null); // ... some logic that uses inputRef return <input ref={inputRef.current} />; };
July 12, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚂𝚝𝚛𝚒𝚗𝚐.𝚛𝚊𝚠 with template literals to output raw strings, ignoring escapes.
console.log(String.raw`Line1\nLine2`); // => "Line1\nLine2" (no actual newline)
July 11, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
const handleSubmit = () => { setIsSubmitting(true); if (isSubmitting) { return; } sendData(); };
July 10, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙾𝚋𝚓𝚎𝚌𝚝.𝚎𝚗𝚝𝚛𝚒𝚎𝚜() + 𝙰𝚛𝚛𝚊𝚢.𝚏𝚒𝚕𝚝𝚎𝚛() to filter object properties
July 9, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
const MyComponent = () => { if (someCondition) { const [state, setState] = useState(false); } };
July 8, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚑𝚊𝚜𝙵𝚘𝚌𝚞𝚜() to check if the tab is active.
if (!document.hasFocus()) { console.log("Tab is not active"); }
July 7, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙰𝚛𝚛𝚊𝚢.𝚙𝚛𝚘𝚝𝚘𝚝𝚢𝚙𝚎.𝚛𝚎𝚍𝚞𝚌𝚎𝚁𝚒𝚐𝚑𝚝() to process arrays from right to left.
const nums = [1, 2, 3, 4]; const result = nums.reduceRight( (acc, n) => acc - n ); console.log(result); // => ((4 - 3) - 2) - 1 = -2
July 2, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙳𝚊𝚝𝚎.𝚙𝚛𝚘𝚝𝚘𝚝𝚢𝚙𝚎.𝚝𝚘𝙸𝚂𝙾𝚂𝚝𝚛𝚒𝚗𝚐() for easy, standardized timestamps.
const now = new Date(); console.log(now.toISOString()); // => "2025-06-16T08:45:00.000Z"
June 30, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
function MyComponent() { const getLabel = () => "Hello!"; return <p>{getLabel}</p>; }
June 29, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚗𝚊𝚟𝚒𝚐𝚊𝚝𝚘𝚛.𝚖𝚊𝚡𝚃𝚘𝚞𝚌𝚑𝙿𝚘𝚒𝚗𝚝𝚜 to detect if the device supports touch.
const isTouch = navigator.maxTouchPoints > 0; console.log( isTouch ? "Touch device" : "Non-touch device" );
June 28, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
function greeting() { return <h1>Hello</h1>; } export default function App() { return <greeting />; }
June 27, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙾𝚋𝚓𝚎𝚌𝚝.𝚐𝚎𝚝𝙾𝚠𝚗𝙿𝚛𝚘𝚙𝚎𝚛𝚝𝚢𝙽𝚊𝚖𝚎𝚜() to get all property names, even non-enumerable ones.
const obj = { name: "Fatou" }; Object.defineProperty( obj, 'hidden', { value: 42, enumerable: false } ); console.log( Object.getOwnPropertyNames(obj) ); // ["name", "hidden"]
June 26, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
const [user, setUser] = useState( { name: "Fatou", age: 31 } ); // ... // Inside callback function setUser({ website: "frontendjoy.com" });
June 25, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚝𝚢𝚙𝚎𝚘𝚏 𝚟𝚊𝚕𝚞𝚎 === '𝚏𝚞𝚗𝚌𝚝𝚒𝚘𝚗' to safely check if something is callable.
function runIfFunction(fn) { if (typeof fn === "function") fn(); }
June 24, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝚂𝚝𝚛𝚒𝚗𝚐.𝚙𝚛𝚘𝚝𝚘𝚝𝚢𝚙𝚎.𝚛𝚎𝚙𝚎𝚊𝚝() to quickly build repeated patterns.
console.log('-'.repeat(10)); // => "----------"
June 22, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
What is wrong with this #react code?
<input value={value} onChange={e => setValue(e.target.value)} defaultValue="Hello" />
June 21, 2025 at 11:00 AM
ndeyefatoudiop.bsky.social
JavaScript Tip 💡

Use 𝙰𝚛𝚛𝚊𝚢.𝚙𝚛𝚘𝚝𝚘𝚝𝚢𝚙𝚎.𝚏𝚒𝚗𝚍𝙸𝚗𝚍𝚎𝚡() to get the position of the first match in an array.
const users = [ { name: "Fatou" }, { name: "Bob" } ]; const index = users.findIndex( (u) => u.name === "Bob" ); console.log(index); // 1
June 20, 2025 at 11:00 AM