Issue #17 - Correct usage of the useRoof hook, understanding HTTP Cookies, a JavaScript game engine and more
Watch the behind-the-scenes story of React’s development, learn how to correctly use the useRef hook, and gain an understanding of how HTTP cookies work.
Tip of the day
When you have an array of key-value pairs that you want to convert into an object, you can use Object.fromEntries to directly convert them instead of doing it via something like reduce.
const entries = [ ['a', 1],
['b', 2],
['c', 3]
];
// ❌ Instead of doing it like this
const obj = entries.reduce((acc, [key, value]) => {
acc[key] = value;
return acc;
}, {});
// obj = {a: 1, b: 2, c: 3}
// ✅ Use Object.fromEntries instead
const obj = Object.fromEntries(entries);
// obj = {a: 1, b: 2, c: 3}
Articles
React useRef Hook for Dummies: How to Use useRef Correctly with Examples
The article breaks down how to use the React useRef hook correctly and explores a few of its different use cases.
by Ammar Ahmed
A practical, Complete Tutorial on HTTP cookies
Learn how HTTP cookies work: simple, practical examples with JavaScript and Python.
Tools
melonJS is a fast and lightweight JavaScript game engine, that just relies on the capabilities of an HTML5-supported browser and has multiple features including WebGL 1 & 2 renderer for desktop and mobile devices with fallback to Canvas rendering, Web Audio support with spatial audio, Mouse and Touch device support etc.
by melonJS
A color contrast checker with a visualisation that shows exactly where the WCAG thresholds sit
Tech Talks
React.js: The Documentary - YouTube
React is easily one of the single most popular libraries in use today. Given that it was made within a juggernaut like Facebook, you might have assumed it wa…
React.js: The Documentary brings you the full story behind the early days of React, focusing on the dedicated group of developers who helped bring it to the world stage. This story is told by an all-star cast of developers like Tom Occhino, Christopher Chedeau, Pete Hunt, Sebastian Markbåge, Dan Abramov, and many more.
by Honeypot
Quiz
What’s wrong with the following code snippet?
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(intervalId);
}, []);
return (
<div>
<p>Count: {count}</p>
</div>
);
}
This week in GIF
Liked this issue? Share on Twitter or read previous issues.