#react-hooks — Public Fediverse posts

The 3 React Upgrades SPFx Devs Are Ignoring (And Why Your Web Parts Are Leaking Performance)

1,402 words, 7 minutes read time.

Let’s cut the fluff: if your SPFx web parts feel sluggish, your state management is spaghetti, or your page crashes under moderate load, it’s because you’re not playing with React the way it’s meant to be played in 2026. The latest version of SPFx ships with React 18 support, but most devs treat it like yesterday’s framework, dragging legacy habits into modern code. I’ve seen it countless times: web parts patched with workarounds, effects firing endlessly, unoptimized re-renders eating CPU cycles, and junior devs praying that no one notices. The hard truth? If you can’t adapt to React’s new features, your code is dying on the vine, and so is your professional credibility.

This isn’t a gentle nudge. I’m here to break down the three React upgrades SPFx developers ignore at their own peril, why they matter technically, and how they mirror discipline—or the lack thereof—in your professional and personal life. First, we tackle the core of modern React: Concurrent Rendering and Automatic Batching.

Concurrent Rendering and Automatic Batching – Your Web Parts’ Backbone

When React 18 dropped concurrent rendering and automatic batching, it wasn’t a luxury—it was a lifeline. Most SPFx devs never adjust their components for this. They cling to class components with componentDidMount hacks or use hooks incorrectly, leaving effects firing multiple times, state updates queuing chaotically, and memory leaks piling up. In SPFx, where your web part is a node on the page with other parts loading simultaneously, this isn’t minor—it’s the difference between a smooth user experience and a browser meltdown.

I’ve refactored dozens of enterprise SPFx solutions. If your useEffect calls aren’t guarded, or you don’t understand how React batches state updates automatically now, you’re wasting render cycles and bleeding performance. Imagine deploying a web part that triggers three API calls per keystroke in a search box because you didn’t wrap state changes in proper batching logic. That’s a professional facepalm waiting to happen.

This is also about integrity. Your components are the kernel of your web part. If they panic, the whole page goes down. Every unguarded effect, every missed cleanup is like leaving a socket exposed: it’s dangerous, messy, and shows laziness. Learning concurrent rendering and embracing automatic batching isn’t optional; it’s the same principle you apply in life when you keep promises, manage your commitments, and clean up after yourself. Half measures don’t cut it in code or character.

From a pure technical perspective, understand that concurrent rendering allows React to interrupt long-running renders, prioritizing urgent updates and keeping the UI responsive. Automatic batching merges multiple state updates into a single render, reducing unnecessary DOM recalculations. In SPFx web parts, where you might be calling the SharePoint REST API or Microsoft Graph, this translates into fewer wasted renders, less flicker, and a page that doesn’t tank when multiple web parts fire simultaneously. It’s subtle, but anyone ignoring this is coding in yesterday’s world.

The takeaway is simple: refactor your legacy components, embrace hooks fully, and make React 18 work for you, not against you. Stop treating batching as magic and understand the lifecycle implications. Every clean render, every optimized state transition, is a reflection of the discipline you either bring or fail to bring to your work.

Suspense, Lazy Loading, and Code Splitting – Stop Shipping Monoliths

If you’re still bundling every component into a single SPFx web part, congratulations—you’re shipping a monolith nobody wants to wait for. React 18’s Suspense, combined with lazy loading, is your ticket to scalable, maintainable, and performant web parts. Yet most devs ignore it. They either don’t understand it or they fear breaking things, so they cling to the “just load everything upfront” mindset. That’s cowardice, plain and simple.

Suspense lets React pause rendering until a component or data is ready. Lazy loading defers non-critical components, shaving precious milliseconds off initial load time. In SPFx, where your web part might pull data from multiple lists, libraries, or Microsoft Graph endpoints, ignoring this is a performance crime. I’ve watched junior developers bake everything into bundle.js, resulting in 3MB downloads for a single web part. Users hate that. Management hates that. And your reputation? Tanking.

Implementing Suspense properly isn’t just technical. It forces discipline in planning component structure, dependencies, and render order. Every lazy-loaded component you ship cleanly mirrors your ability to compartmentalize and manage complexity in real life. A man who leaves tasks half-done, who tries to juggle everything without order, is coding like he lives: chaotic, inefficient, and fragile. You want clean SPFx web parts? Start thinking like a disciplined architect.

Technically, wrapping your web parts with Suspense and splitting components using React.lazy() reduces initial payload and allows React to prioritize urgent renders. Combined with proper error boundaries, you’re not just optimizing performance—you’re creating a resilient system. Lazy-loading non-critical components is like building load-bearing walls before the decorative trim: prioritize stability, then polish. Any SPFx dev ignoring this is playing checkers in a chess game.

Strict Mode, DevTools, and Type Safety – Expose Your Weak Links

React 18’s Strict Mode is more than a debug feature—it’s a truth serum for sloppy code. When enabled, it intentionally double-invokes certain functions and effects to highlight side effects, memory leaks, and unsafe lifecycles. Most SPFx developers disable it immediately because it “spams the console.” That’s the coward’s move. You’re afraid to face your mistakes.

I run Strict Mode on every SPFx project. Every memory leak caught early saves headaches later. Every unclean effect prevented saves CPU cycles and user frustration. Pair that with TypeScript’s type enforcement and React DevTools profiling, and you’re not just coding—you’re auditing, refactoring, and hardening your web parts. Anything less is negligent.

The life lesson here is brutal but simple: discipline exposes weakness. If you’re not testing, profiling, and pushing your code to reveal flaws, you’re hiding from your own incompetence. Your character is the kernel; your habits are the state. If you panic under load, everything around you suffers. Apply Strict Mode and type safety to React in SPFx, and you build a muscle: resilience, foresight, and accountability.

Technically, the combination of Strict Mode and TypeScript ensures that your SPFx web parts are robust against async pitfalls, improper effect cleanup, and improper prop usage. Every refactor becomes a proof point that you can maintain complex systems with minimal technical debt. If you ignore it, you’re shipping spaghetti and calling it gourmet.

Conclusion: No-Excuses Mastery – Ship Like a Pro or Ship Like a Junior

Here’s the brutal truth: React 18 in SPFx is a weapon. Ignore concurrent rendering, batching, Suspense, lazy loading, Strict Mode, or TypeScript, and you’re not a developer—you’re a liability. You can’t pretend old habits will carry you; they won’t. Your web parts crash, your users suffer, and your reputation bleeds like memory leaks in an unoptimized component.

Refactor. Optimize. Audit. Stop shipping half-baked web parts. Embrace concurrent rendering to stabilize your core, implement Suspense and lazy loading to manage complexity, and enforce strict checks and type safety to expose weaknesses before they hit production. Every module you clean, every effect you guard, every render you optimize reflects the man you are—or refuse to be.

No more excuses. Ship like a professional, or get left behind. Your SPFx web parts are a reflection of your discipline, attention to detail, and mastery of modern frameworks. Treat them with respect. Treat your craft with respect. And for anyone serious about leveling up, subscribe, comment, or reach out—but only if you’re ready to put in the work. Half measures are for hobbyists.

Call to Action

If this post sparked your creativity, don’t just scroll past. Join the community of makers and tinkerers—people turning ideas into reality with 3D printing. Subscribe for more 3D printing guides and projects, drop a comment sharing what you’re printing, or reach out and tell me about your latest project. Let’s build together.

D. Bryan King

Sources

• React Official Documentation
• SPFx Web Part Overview
• Concurrent UI Patterns in React
• React Suspense API
• React.lazy Documentation
• React Hooks Introduction
• SPFx Hello World Guide
• React StrictMode
• TypeScript Handbook
• Optimizing Performance in React
• SPFx Web Part Lifecycle

Disclaimer:

The views and opinions expressed in this post are solely those of the author. The information provided is based on personal research, experience, and understanding of the subject matter at the time of writing. Readers should consult relevant experts or authorities for specific guidance related to their unique situations.

Related Posts

Rate this:

Oh, so a React hook managed to take #Cloudflare from #DDoS superhero to dashboard damsel in distress? 🚀 To be fair, who could have predicted that a bit of #JavaScript could wield such mighty power over APIs? 🔧🙄
https://blog.cloudflare.com/deep-dive-into-cloudflares-sept-12-dashboard-and-api-outage/ #ReactHooks #APIs #TechNews #HackerNews #ngated

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

#ReactHooks #Reactjs #JavaScript

Does anyone have experience of using the useQuery hook in React to manage data requests? If so, would you recommend it?

#react #reacthooks

"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.

https://github.com/dai-shi/react-hooks-fetch/pull/46

#ReactJS #React #JavaScript #TypeScript #ReactHooks

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!

https://react-tracked.js.org/ 🚀

#ReactJS #React #JavaScript #TypeScript #ReactHooks

🚀 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

#ReactJS #React #JavaScript #TypeScript #ReactHooks

📢 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. 🙌

https://github.com/dai-shi/react-tracked

#ReactJS #React #JavaScript #TypeScript #ReactHooks

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.

https://github.com/dai-shi/use-context-selector

#ReactJS #React #JavaScript #TypeScript #ReactHooks

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/

#JavaScript #JSX #React #ReactHooks #VueJs

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.

https://react-tracked.js.org

#ReactJS #React #JavaScript #TypeScript #ReactHooks

I just released use-context-selector v1.4.4,

found out it's the 50th version,

and found out it has 100 dependents!

#ReactJS #React #JavaScript #TypeScript #ReactHooks

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

#ReactJS #React #JavaScript #TypeScript #ReactHooks

React-Tracked v2.0.0-beta.1 has been released! https://www.npmjs.com/package/react-tracked/v/2.0.0-beta.1

I gave up on full render optimization based on each render, but this is a best effort to be compatible with memoization.

Can any React-Tracked users try it please?

`npm i react-tracked@next`

#ReactJS #React #JavaScript #TypeScript #ReactHooks

React-Tracked v1.7.12 is just released! https://react-tracked.js.org

This version should fix the issue with React Native 0.72.

#ReactJS #React #JavaScript #TypeScript #ReactHooks

Just released use-context-selector v1.4.2! https://github.com/dai-shi/use-context-selector

It has been two years since the last release. This version should fix the issue with React Native 0.72.

#ReactJS #React #JavaScript #TypeScript #ReactHooks

"Using useMemo and useCallback to Save the Past from React Langoliers | by Charles Chen | Feb, 2023 | ITNEXT" https://itnext.io/using-usememo-and-usecallback-to-save-history-from-react-langoliers-8eb7bb72c87 #reactjs #javascript #reacthooks

"Using useMemo and useCallback to Save the Past from React Langoliers | by Charles Chen | Feb, 2023 | ITNEXT" https://itnext.io/using-usememo-and-usecallback-to-save-history-from-react-langoliers-8eb7bb72c87 #reactjs #javascript #reacthooks

"Mastering 'useCallback' in React with TypeScript: 4 Different Use-Cases for 'useCallback' - DEV Community" https://dev.to/kirubelkinfe/mastering-usecallback-in-react-with-typescript-4-different-use-cases-for-usecallback-3lga #react #reacthooks #usecallback

I'm deprecating one of my old projects: https://github.com/dai-shi/react-hooks-global-state

It's one of my React hook libraries I developed in the early days. It's also the reason I joined the development of Zustand. Since v2, it internally uses Zustand. Now, it's marked as "NOT MAINTAINED".

#ReactJS #React #JavaScript #TypeScript #ReactHooks

Toward the new React era, some projects of mine are being deprecated, such as react-suspense-fetch https://github.com/dai-shi/react-suspense-fetch. It's trying to provide a low-level API for Suspense for Data Fetching.

#ReactJS #React #JavaScript #TypeScript #ReactHooks

Thanks to azat-io to provide support for #Vitest #React #ReactHooks #JSXA11y and #TestingLibrary 🚀

All available now in v1.20.0

https://github.com/Shinigami92/eslint-define-config/releases/tag/1.20.0

"Using useMemo and useCallback to Save the Past from React Langoliers | by Charles Chen | Feb, 2023 | ITNEXT" https://itnext.io/using-usememo-and-usecallback-to-save-history-from-react-langoliers-8eb7bb72c87 #reactjs #javascript #reacthooks

Hi Zustand users,

I just opened a discussion about migrating to named exports.
Check it out: https://github.com/pmndrs/zustand/discussions/1506

#ReactJS #Zustand #StateManagement #ReactHooks #JavaScript #TypeScript

React-Tracked v1.7.11 is released. https://react-tracked.js.org

It's not a state management library, but can be used with useState for state management. It works with Redux and Zustand too.

#ReactJS #StateManagement #ReactHooks #JavaScript #TypeScript

jotai-location v0.3.2 is released! https://github.com/jotai-labs/jotai-location

It has a util called `atomWithHash` to sync atom value with `location.hash`.

#ReactJS #Jotai #StateManagement #ReactHooks #JavaScript #TypeScript