React.js Notes
383 subscribers
74 photos
4 files
48 links
Welcome :)
Public React Notes
Download Telegram
⭐️Make your ideas look awesome, without relying on a designer.⭐️

- Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

📂The entire book is free and attached in the following message.

refactoringui.com

#React #WebDevelopment #Coding #Book #UI #FrontEnd
2
⭐️Learning Patterns by Lydia Hallie and Addy Osmani⭐️

- A must-read for React developers.
It explores best practices, design patterns, and key strategies for building efficient and scalable React applications.

- This book provides clear, actionable insights to enhance your coding skills and elevate your understanding of React's powerful ecosystem.
Perfect for both beginners and seasoned developers looking to optimize their workflow.

📂The entire book is free and attached in the following message.

#React #WebDevelopment #Coding #Book #UI #FrontEnd
1🥰1
create-react-app is deprecated
Show this thread 🔗
Show react blog 🔗
🔥3👍1
Instead of using libs for envs, you can use this simple type-safe variant and forget about envs validation.

The post from this tweet Click here🔗
🥰1🏆1
🎉 react-emoji-toggle-button is available now!
A lightweight and customizable emoji picker built for modern React applications.

Key Features:
Light & Dark Themes
English & Arabic UI Support
Recent & Flag Emojis
Filter Bad Emojis
Fully Customizable Styles & Sizes
Easy Integration with any input field

Perfect for chat apps, comment sections, and any interactive UI that deserves an expressive touch! 💬💛

🌐 Live Demo:
https://mahmoud-walid.github.io/react-emoji-toggle-button/

📦 Install via npm:
npm i react-emoji-toggle-button

🔗 GitHub:
https://github.com/Mahmoud-walid/react-emoji-toggle-button

If you like it, don’t forget to ⭐️ the repo and share it with fellow developers! 🙌

Bring emojis to life in your app today! 🧑‍💻🚀
3🥰1🎉1
🔥2
🔍 React has its own MurmurHash3 implementation… and it’s hidden in plain sight!

Inside the React source code, there's a little gem of an implementation tucked away in createFastHashJS.js. This file contain a pure JavaScript, Sync, non-cryptographic hashing function based on MurmurHash3 (32-bit).

export function createFastHashJS(key: string): number {
return murmurhash3_32_gc(key, 0);
}


Why does React need this ?
React uses this fast hash internally —- for example, to hash key paths used in useActionState when handling MPA-style from submissions.
These hashes are used to track state transitions, cache component branches, or generate unique keys.

Why not use Web Crypto?
The browser’s crypto.subtle.digest() is asynchronous, which makes it unsuitable in React performance-critical paths where synchronous execution is essential to avoid choppy renders and high context-switching costs.

MurmurHash3: The best choice
This version comes from Gary Court's highly respected JS port of the MurmurHash3 algorithm.

📦 Use Cases in environments like React.
- Component key path hashing.
- Action state deduplication.
- Deterministic memoization cache keys.
- Static asset naming (in build tools).
- ID generation in SSR contexts.

🔐 Important warning
This hash is not cryptographically secure. It’s optimized for speed and determinism, not protection. Don’t use it for passwords, tokens, or anything sensitive!

——————-

This is one of those internal utilities that reminds us: even in massive projects like React, simplicity often wins when performance is king 👑

——————-

🔗Links
createFastHashJS.js
MurmurHash
2🏆1
⚡️ TypeScript: Recursive deep extraction → union type generation!
2🥰1
clean TypeScript pattern.

- Reusable
- Composable
- Type-Safe
2🥰1