One more brownbag is coming! 🚀
Join Iasmim Cristina in her presentation "Custom Hooks possible issues: state sharing" at 12:30 BRT
Click on the link so you don't miss out!
#reacthooks
Build smarter UIs faster. At Overture Rede, we turn developers into React pros—one component, hook, and best practice at a time.
🚀 Start your journey with Overture Rede!
📩 resumes@overturerede.zohorecruitmail.in
📱 WhatsApp: +91-9582224661
🔗 Apply: https://zurl.co/LJ7gD
#ReactTraining #OvertureRede #FrontEndMasters #LearnReactJS #ModernWebDev #UIDevelopment #WebArchitecture #CodeWithClarity #ReactHooks #TechCareers
🚀 Master React Hooks: What, Why, and How for Full Stack Developers 🌟
Want to level up your React skills? React Hooks lets you manage state and side effects without class components. They simplify code, improve performance, and make development smoother.
🔧 Learn how to use useState, useEffect, useContext, and more in this quick guide!
👉 Read the full article here: [https://speora.org/understanding-react-hooks-what-why-and-how-for-full-stack-developers]
#ReactJS #ReactHooks #FullStackDevelopment #WebDev #JavaScript #TechTips
Does anyone have experience of using the useQuery hook in React to manage data requests? If so, would you recommend it?
Ready to refactor your class components to use functional components with hooks? Don’t have time to fix it? Let’s talk! 🚀
Our senior software engineers specialize in thorny upgrades so you can focus on your product roadmap 👉 https://go.upgradejs.com/3b7
"Encryption at Rest" for JavaScript Projects
Following a previous post (https://infosec.exchange/@xoron/113446067764347249), which can be summarized as: I'm tackling bottom-up state management with an extra twist: integrating encryption at rest!
I created some updates to the WIP pull-request. The behavior is as follows.
- The user is prompted for a password if one isn't provided programmatically.
- This will allow for developers to create a custom password prompts in their application. The default fallback is to use a JavaScript prompt().
- It also seems possible to enable something like "fingerprint/face encryption" for some devices using the webauthn api. (This works, but the functionality is a bit flaky and needs to be fixed before rolling out.)
- Using AES-GCM with 1000000 iterations of PBKDF2 to derive the key from the password.
- The iterations can be increased in exchange for slower performance. It isn't currently configurable, but it might be in the future.
- The salt and AAD need to be deterministic and so to simplify user input, the salt as AAD are derived as the sha256 hash of the password. (Is this a good idea?)
The latest version of the code can be seen in the PR: https://github.com/positive-intentions/dim/pull/9
I'm keen to get feedback on the approach and the implementation before i merge it into the main branch.
#JavaScript #Encryption #IndexedDB #WebDevelopment #CryptoAPI #FrontendDev #ReactHooks #StateManagement #WebSecurity #OpenSource #PersonalProjects
"Encryption at Rest" for JavaScript Projects
I'm developing a JavaScript UI framework for personal projects, and I'm tackling state management with an extra twist: integrating encryption at rest!
Inspired by this React Hook: Async State Management (https://positive-intentions.com/blog/async-state-management), I’m extending it to support encrypted persistent data. Here's how:
✨ The Approach:
Using IndexedDB for storage.
Data is encrypted before saving and decrypted when loading using the Browser Cryptography API.
Event listeners will also be encrypted/decrypted to avoid issues like browser extensions snooping on events.
The password (should never be stored) is entered by the user at runtime to decrypt the data. (Currently hardcoded for now!)
The salt will be stored unencrypted in IndexedDB to generate the key.
🔗 Proof of Concept:
You can try it out here: GitHub PR (https://github.com/positive-intentions/dim/pull/8). Clone or run it in Codespaces and let me know what you think!
❓ Looking for Feedback:
Have I missed anything? Are there better ways to make this storage secure?
Let's make secure web UIs a reality together! 🔒
#JavaScript #Encryption #IndexedDB #WebDevelopment #CryptoAPI #FrontendDev #ReactHooks #StateManagement #WebSecurity #OpenSource #PersonalProjects
"Best Practices for Creating Reusable Custom Hooks in React - DEV Community" https://dev.to/hasancse/best-practices-for-creating-reusable-custom-hooks-in-react-37nj #React #JavaScript #WebDevelopment #CustomHooks #Programming #FrontendDevelopment #CodeReuse #SoftwareEngineering #BestPractices #ReactHooks #DevCommunity #TechTips #CodeQuality
As React Query won, and with React 19 landing soon, I decided to deprecate one of my old projects. Thanks for your interest and support. It was a long journey, but my focus on data fetching is now on Waku.
await vs yield на примере Effection 3.0 и React
18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах ( Structured Concurrency and Effects for JavaScript). В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом: - Race condition - AbortController - Clean up - Debounce
https://habr.com/ru/articles/819005/
#react #typescript #generators #async #reacthooks #concurrency #javascript
🎉 Announcing React-Tracked v2.0.0! Optimize re-renders with React Context, Zustand, or Redux. No selectors needed. State usage is magically tracked with Proxies. Now compatible with memo & useMemo in React 18 & 19, and hopefully with React Compiler!
🚀 New major release: use-context-selector v2.0.0! This userland library optimizes React renders with context and selectors. Now with a simpler bundle setup. Upgrade if you're on React 18! https://github.com/dai-shi/use-context-selector
📢 Just published React-Tracked v2.0.0-rc.0!
Is anyone out there a React-Tracked user? I need your help to confirm if it works. 🙌
As React is reaching 19, let's update some of my libraries deprecating old support.
Today, I worked on `use-context-selector`. Just published v2.0.0-beta.0. It drops React <18 and UMD.
Let me know if it works okay for you.
Earlier this week, we looked at how binding works with React and we looked at two useful React Hooks. Today, I wanted to take a quick look at how you style your React app. For this example, we are looking at rolling our own a style using flex (instead of using something like Ionic or Bulma).
See the Pen
React - Form Styling by Joe Steinbring (@steinbring)
on CodePen.
In this example, we have four form inputs (First Name, Last Name, Email Address, and Phone Number) and a button for submitting the values. The form is defined with <form onSubmit={handleSubmit}> and the inputs are defined with <input onChange={handleChange} /> so that when you click on the submit button, it executes handleSubmit and when you change a value in an input, it executes handleChange. The App div is the full width of the page and 100vh so that the form is centered on the page. The First Name and Last Name are on the same line but the Email Address and the Phone Number are the full width of the form. Since the App div, the form and the inputs all have classes, the CSS rules are all pretty straightforward.
Have a question, comment, etc? Feel free to leave a comment, below.
Earlier this week, we started looking at React and I figured that for today’s post, we should take a look at the useEffect and useMemo React Hooks. Hooks are functions that let you “hook into” React state and lifecycle features from function components. In yesterday’s post, we used useState. That is another React Hook. The useState Hook allows us to track state in a function component (not unlike how we used Pinia or Vuex with Vue.js).
The useEffect React hook lets you perform side effects in functional components, such as fetching data, subscribing to a service, or manually changing the DOM. It can be configured to run after every render or only when certain values change, by specifying dependencies in its second argument array. The useMemo React hook memoizes expensive calculations in your component, preventing them from being recomputed on every render unless specified dependencies change. This optimization technique can significantly improve performance in resource-intensive applications by caching computed values.
Let’s take a look at a quick useEffect, first. For the first demo, we will use useEffect and useState to tell the user what the current time is.
See the Pen
React Hooks -- Refresh time once per page load by Joe Steinbring (@steinbring)
on CodePen.
Let’s walk through what we have going on here. The App() function is returning JSX containing <p>The current time is {currentTime}</p> and currentTime is defined by setCurrentTime. The code block useEffect(() => {}); executes whenever the state changes and can be used to do something like fetching data or talking to an authentication service. It also fires when the page first renders. So, what does that empty dependency array (,[]) do in useEffect(() => {},[]);? It makes sure that useEffect only runs one time instead of running whenever the state changes.
We can get a little crazier from here by incorporating the setInterval() method.
See the Pen
React Hooks -- Refresh time once per second by Joe Steinbring (@steinbring)
on CodePen.
In this example, it still runs useEffect(() => {},[]); only once (instead of whenever the state changes) but it uses setInterval() inside of useEffect to refresh the state once every 1000 milliseconds.
Let’s take a look at another example.
See the Pen
React Hooks -- Get Digits of π + Color Picker by Joe Steinbring (@steinbring)
on CodePen.
In this one, we have three form elements: a number picker for “digits of pi”, a color picker for changing the background, and a read-only textarea field that shows the value of π to the precision specified in the “digits of pi” input. With no dependency array on useEffect(() => {});, whenever either “Digits of Pi” or the color picker change, useEffect is triggered. If you open the console and make a change, you can see how it is triggered once when you change the background color and twice when you change the digits of pi. Why? It does that because when you change the number of digits, it also changes the value of pi and you get one execution per state change.
So, how can we cut down on the number of executions? That is where useMemo() comes in. Let’s take a look at how it works.
See the Pen
React Hooks -- Get Digits of π + Color Picker -- 2 by Joe Steinbring (@steinbring)
on CodePen.
In this revision, instead of piValue having a state, it is “memoized” and the value of the variable only changes if the value of digits changes. In this version, we are also adding a dependency array to useEffect() so that it only executes if the value of color changes. Alternatively, you could also just have two useEffect() instances while specifying different dependencies. Let’s take a look at that.
See the Pen
React Hooks -- Get Digits of π + Color Picker -- 3 by Joe Steinbring (@steinbring)
on CodePen.
If you throw open your console and change the two input values, you will see that it is no longer triggering useEffect() twice when changing the number of digits.
Have any questions, comments, etc? Feel free to drop a comment, below.
https://jws.news/2024/exploring-useeffect-and-usememo-in-react/
React-Tracked v1.17.4 and v2.0.0-beta.3 have been released!
Could some R-T users please try v2-beta? If I get one 👍 at least, I want to consider releasing v2.
I just released use-context-selector v1.4.4,
found out it's the 50th version,
and found out it has 100 dependents!
Just published the following packages:
- use-context-selector v1.4.3
- react-tracked v1.7.13
- react-tracked v2.0.0-beta.2
They fixed an issue with React Native.
https://github.com/dai-shi/use-context-selector
https://github.com/dai-shi/react-tracked
Client Info
Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst