Alex
LightNews LightNews
banner
alexdln.com
Alex
@alexdln.com
380 followers 370 following 1.1K posts
Web Engineer, Author, Contributor, Photographer
Frontend/React/Next.js/UX/DX/Сapybara/Performance/Growth

🔨 Building slidebook.dev | atsky.app | robindoc.com | nimpl.dev
🏡 Living alexdln.medium.com | github.com/alexdln
Posts Replies Media Videos
alexdln.com
In honor of the trailer for the new series, I can't not to share that I recently went into a Disney store for the first time. And when I saw this, I stood there and was as happy as a child 👶
A store display shelf featuring boxed toys of Buzz Lightyear and Woody from Toy Story. On the left are several Buzz Lightyear “Space Ranger” action figures in white and purple packaging, and on the right are Woody “Sheriff” dolls in blue and brown “Woody’s Roundup” boxes.
November 11, 2025 at 8:36 PM
alexdln.com
I added support for the prevMutatedStore argument, which is the result of the previous call. Is there any way to dynamically type this argument?
const filteredItems = useStore(AppStore, { keys: ["items", "filter"], mutation: (newStore, prevStore, prevMutatedStore) => { // Reuse previous result if filter hasn't changed if (prevMutatedStore && prevStore?.filter === newStore.filter) { return prevMutatedStore; } return newStore.items.filter((item) => item.includes(newStore.filter)); }, });
November 11, 2025 at 1:08 PM
alexdln.com
When implementing a small improvement resulted in half the types being refactored 🫠

(In fact, writing a file with tests for all type variations was one of the best ideas for a package like this)
A screenshot of the Github changes shows that many lines have been removed in the GlobalStoreConsumer type overloads.. More details at https://github.com/alexdln/contection/pull/28/files#diff-f09367ce42e4a7deddfb5df986db284563dae0359aad0f4ba4a21923746aa992
November 11, 2025 at 10:19 AM
alexdln.com
Broken scrollbars have become too common problem 🫠
This is what happens when the entire company is Apple-powered...

* Please don't use 100vw within a scrollbar element, use 100% *
November 10, 2025 at 9:34 PM
alexdln.com
I'm getting used to writing out all my ideas, as I'm starting to think through more issues in parallel and forgetting about many parts. It's also more public-friendly, which clearly benefits the package 😊
Support prevMutatedStore argument in dispatch callback #27 @alexdln Description In some cases, a mutation will return an object, which will be created anew each time the mutation is called. This means a re-render will occur every time the subscribed keys change, even though the object's contents may remain the same. This issue will add the ability to handle such cases. Users will be able to immediately return prevMutatedStore if the data they need has not changed (similar to working with setState). The issue only concerns scenarios where there is a mutation and it returns an object; in other scenarios, everything is quite optimal.
November 10, 2025 at 9:09 PM
alexdln.com
How complex and complicated any update becomes at some point. It's great that they're coming up with new abstractions instead of creating hundreds of workarounds or crutches to make it work
Fix: Activity should hide portal contents #35091 Merged acdlite merged 2 commits into facebook:main from acdlite:activity-portals-fix 16 minutes ago +245 −57 Conversation 11 Commits 2 Checks 240 Files changed 4 commented 9 hours ago This PR updates the behavior of Activity so that when it is hidden, it hides the contents of any portals contained within it. Previously we had intentionally chosen not to implement this behavior, because it was thought that this concern should be left to the userspace code that manages the portal, e.g. by adding or removing the portal container from the DOM. Depending on the use case for the portal, this is often desirable anyway because the portal container itself is not controlled by React. However, React does own the contents of the portal, and we can hide those elements regardless of what the user chooses to do with the container. This makes the hiding/unhiding behavior of portals with Activity automatic in the majority of cases, and also benefits from aligning the DOM mutations with the rest of the React's commit phase lifecycle. The reason we have to special case this at all is because usually we only hide the direct DOM children of the Activity boundary. There's no reason to go deeper than that, because hiding a parent DOM element effectively hides everything inside of it. Portals are the exception, because they don't exist in the normal DOM hierarchy; we can't assume that just because a portal has a parent in the React tree that it will also have that parent in the actual DOM. So, whenever an Activity boundary is hidden, we must search for and hide any portal that is contained within it, and recursively hide its direct children, too. To optimize this search, we use a new subtree flag, PortalStatic, that is set only on fiber paths that contain a HostPortal. This lets us skip over any subtree that does not contain a portal.
November 10, 2025 at 4:03 PM
alexdln.com
I was choosing an emoji and realized it could’ve been me with my mid-level mechanical qualification from the factory 😅
alexdln.com Alex @alexdln.com · 1d
Well, now it’s even more stable and reliable 🧑‍🔧
[Success] Daily auto tests for React Canary Daily auto tests for React Canary #3: Manually run by alexdln main 2 minutes ago 29s [Failed] Daily auto tests for React Canary Daily auto tests for React Canary #2: Manually run by alexdln main 11 minutes ago 25s [Failed] Daily auto tests for React Canary Daily auto tests for React Canary #1: Manually run by alexdln main 20 minutes ago 28s
November 10, 2025 at 3:51 PM
alexdln.com
Hmm, interesting cursor update!
Now I misclick the File tab every time...
November 10, 2025 at 3:09 PM
alexdln.com
I'm trying to decide if I need to make dispatch in Contection asynchronous.

And I'm like: "How should they work then? What's the queue? What if something changes in the meantime? What, how, where, aaaAAAA"
November 10, 2025 at 2:36 PM
alexdln.com
I love my sabbatical too much and physically can't apply for positions.
If I die of hunger - know that I died happy and in writing packages!
November 10, 2025 at 2:34 PM
alexdln.com
I love those moments when the interviewer's gaze speaks louder than words when asking about a company or product
November 10, 2025 at 2:30 PM
alexdln.com
"A second before jumping"

Morning!
A blurry photo of a golden-brown dog running on green grass in a park, likely about to jump at the photographer, with trees and people visible in the sunny background.
November 10, 2025 at 9:06 AM
alexdln.com
Well, congratulations, Bluesky, on your growth! This is another sign that the platform is growing and developing, which is great.

* I hope all users here know that such messages and links have nothing to do with reality *
Dear user, Your Bluesky access will be paused if safety verification is not completed within 24 hours. This measure is necessary to confirm the integrity of your account. Verify your account within 24 hours to complete verification and restore full access. 🔗 is.gd/**** We appreciate your timely attention to this matter. Sincerely, © Bluesky Security
November 9, 2025 at 10:18 PM
alexdln.com
I finally finished them. Now the magic of Contection is completely covered in tests!
issue-6 add unit tests +6,278 −479 > contection-tests@1.0.0 test /home/runner/work/contection/contection/tests > jest PASS src/unit/__tests__/useStore.test.tsx PASS src/unit/__tests__/consumer.test.tsx PASS src/unit/__tests__/provider.test.tsx PASS src/unit/__tests__/createStore.test.tsx PASS src/unit/__tests__/useStoreReducer.test.tsx Test Suites: 5 passed, 5 total Tests: 57 passed, 57 total it("should re-render only when mutation result changes", () => { let renderCount = 0; const UpdateComponent = () => { const [, update] = useStoreReducer(TestStore); return <button onClick={() => update((prev) => ({ count: prev.count + 1 }))}>Update</button>; }; render( <TestStore.Provider> <TestStore.Consumer options={{ mutation: (store) => (store.count === 2 ? "two" : "not two"), }} > {(result) => { renderCount++; return <div data-testid="result">{result}</div>; }} </TestStore.Consumer> <UpdateComponent /> </TestStore.Provider>, ); expect(renderCount).toBe(1); expect(screen.getByTestId("result")).toHaveTextContent("not two"); act(() => screen.getByText("Update").click()); expect(renderCount).toBe(1); expect(screen.getByTestId("result")).toHaveTextContent("not two"); act(() => screen.getByText("Update").click()); expect(renderCount).toBe(2); expect(screen.getByTestId("result")).toHaveTextContent("two"); });
November 9, 2025 at 9:59 PM
alexdln.com
I thought I needed to develop some additional tools to make Contection compatible with forms. But it seems to already handle it perfectly!
export const FormComponent = () => { const [store, dispatch] = useStoreReducer(ShopStore); return ( <Form> <Input placeholder="Name" /> <Input placeholder="Email" /> <Input placeholder="Phone" /> <Input placeholder="Address" /> <Label> <Checkbox placeholder="Select" onChange={(e) => dispatch({ payBy: e.target.checked ? "credit_card" : null })} defaultChecked={store.payBy === "credit_card"} /> Pay with credit card </Label> <ShopStore.Consumer options={{ keys: ["payBy"], mutation: (newStore) => newStore.payBy === "credit_card" }}> {(payByCreditCard) => ( <Activity mode={payByCreditCard ? "visible" : "hidden"}> <Input placeholder="Credit Card Number" /> <Input placeholder="Expiration Date" /> <Input placeholder="CVV" /> </Activity> )} </ShopStore.Consumer> </Form> ); };
November 9, 2025 at 2:13 PM
alexdln.com
I love writing tests for external solutions. You immediately find the specific case you were planning for, but it doesn't work!
November 9, 2025 at 1:31 PM
alexdln.com
I understand why this is so, but for some reason this react_dev example hurts my eyes.

Maybe I'm too used to working with code outside the main body of a component, and such code somewhere inside feels like it is potentially vulnerable (_but yes, it's not_)
function FriendList({ friends }) { const items = []; // ✅ Good: locally created for (let i = 0; i < friends.length; i++) { const friend = friends[i]; items.push( <Friend key={friend.id} friend={friend} /> ); // ✅ Good: local mutation is okay } return <section>{items}</section>; }
November 9, 2025 at 9:57 AM
alexdln.com
I finally got around to setting up publishing on PR!

Previously, I always released canary branch and only then made a stable release. It was inconvenient, and I often wanted to skip it...
Now, for non-critical changes, it's just PR > review in external projects > release.
Github PR screenshot: Some checks haven't completed yet Publish experimental package / publish-experimental (pull request) No conflicts with base branch [Merge pull request]
November 8, 2025 at 1:43 PM
alexdln.com
This is really cool and interesting, especially how it’s implemented at the bundler level! Thanks for the detailed explanation!
amann.work Jan @amann.work · 4d
🌐 next-intl 4.5: useExtracted

→ For humans & AI
→ Next.js-first by design
→ Full Turbopack support
→ SWC-based parsing
Code sample that demonstrates useExtracted
November 7, 2025 at 11:27 PM
alexdln.com
I've been looking for a way to fix React contexts and create a familiar, fast, and universal interface for state management for a long time. Finally, it's available as a standalone package!
November 7, 2025 at 4:25 PM
alexdln.com
Developer problems: after a startup, get a job at a corporation; after a corporation, get a job at a startup
November 7, 2025 at 11:10 AM
alexdln.com
Yesterday I spent the whole day finalizing the library. I love simplifying decisions and making them final. It's like finally finishing a dish and serving it 🧑‍🍳
November 7, 2025 at 9:53 AM
alexdln.com
Do you know that feeling when you wake up full of energy and strength, eager to start the day?

Me neither!
Person in a pink furry character costume with big eyes and a large nose interacting with people at an outdoor event
November 7, 2025 at 9:46 AM
alexdln.com
Am I the only one who missed this change?
function App() { const [theme, setTheme] = useState('light'); // ... return ( <ThemeContext value={theme}> <Page /> </ThemeContext> ); } Note Starting in React 19, you can render <SomeContext> as a provider. In older versions of React, use <SomeContext.Provider>.
November 5, 2025 at 10:38 PM
alexdln.com
There are too many libraries that don't solve the problem! I've looked at a couple dozen, and they're all wrong! I'm creating a new one, it will reduce the number of libraries I need!
November 5, 2025 at 4:48 PM