📕 To learn more:
- www.epicreact.dev/the-latest-r...
- react.dev/reference/re...
- nextjs.org/docs/app/api...
- www.epicreact.dev/the-latest-r...
- react.dev/reference/re...
- nextjs.org/docs/app/api...
The Latest Ref Pattern in React
How to improve your custom hook APIs with a simple pattern.
www.epicreact.dev
October 28, 2025 at 1:28 PM
📕 To learn more:
- www.epicreact.dev/the-latest-r...
- react.dev/reference/re...
- nextjs.org/docs/app/api...
- www.epicreact.dev/the-latest-r...
- react.dev/reference/re...
- nextjs.org/docs/app/api...
💡 You can see an example of triggering an effect event when the route changes in a Next.js app in the video.
October 28, 2025 at 1:28 PM
💡 You can see an example of triggering an effect event when the route changes in a Next.js app in the video.
⚛️ And now, React 19.2 has a new hook called useEffectEvent. In short, you can extract the non-reactive parts of your logic and trigger it only when the reactive parts change!
October 28, 2025 at 1:28 PM
⚛️ And now, React 19.2 has a new hook called useEffectEvent. In short, you can extract the non-reactive parts of your logic and trigger it only when the reactive parts change!
👀 Of course, another solution to this could be auto-memoization by the React Compiler, but you may not want to (or can't) use it in a production app for now.
October 28, 2025 at 1:28 PM
👀 Of course, another solution to this could be auto-memoization by the React Compiler, but you may not want to (or can't) use it in a production app for now.
⚠️ You may think about not adding the dependency and ignore ESLint, but let's not do that!
👉 With the "latest ref pattern", you guarantee that the latest callback will be called when the effect is triggered, and since it is a ref, you don't need to put it in the dependencies.
👉 With the "latest ref pattern", you guarantee that the latest callback will be called when the effect is triggered, and since it is a ref, you don't need to put it in the dependencies.
October 28, 2025 at 1:28 PM
⚠️ You may think about not adding the dependency and ignore ESLint, but let's not do that!
👉 With the "latest ref pattern", you guarantee that the latest callback will be called when the effect is triggered, and since it is a ref, you don't need to put it in the dependencies.
👉 With the "latest ref pattern", you guarantee that the latest callback will be called when the effect is triggered, and since it is a ref, you don't need to put it in the dependencies.
🤔 You can put the callback prop in the dependencies of useEffect, but then you will need to wrap the function you pass as a prop with useCallback. If you miss this, that "effect callback" can be called at unexpected times, like during re-renders.
October 28, 2025 at 1:28 PM
🤔 You can put the callback prop in the dependencies of useEffect, but then you will need to wrap the function you pass as a prop with useCallback. If you miss this, that "effect callback" can be called at unexpected times, like during re-renders.
📕 To learn more:
- developer.mozilla.org/en-US/docs/W...
- developer.mozilla.org/en-US/docs/W...
:has() - CSS | MDN
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-...
developer.mozilla.org
October 26, 2025 at 9:48 PM
📕 To learn more:
- developer.mozilla.org/en-US/docs/W...
- developer.mozilla.org/en-US/docs/W...
👀 Of course, check browser compatibility before using this. It is "Newly Available" according to Baseline.
October 26, 2025 at 9:48 PM
👀 Of course, check browser compatibility before using this. It is "Newly Available" according to Baseline.
🤔 Also, this is not a "React only" tip. You can use it with any UI framework, or none at all! And you don't even need to use <dialog> either. You can use any method you want to create a modal, and as long as you can select that element with CSS, :has() is useful in this case.
October 26, 2025 at 9:48 PM
🤔 Also, this is not a "React only" tip. You can use it with any UI framework, or none at all! And you don't even need to use <dialog> either. You can use any method you want to create a modal, and as long as you can select that element with CSS, :has() is useful in this case.
⭐️ I think one of the very common cases where this is useful is hiding <body> scrollbars when a modal is open, and there are lots of JS-based techniques and libraries around. Nowadays, it is very easy and possible with :has().
October 26, 2025 at 9:48 PM
⭐️ I think one of the very common cases where this is useful is hiding <body> scrollbars when a modal is open, and there are lots of JS-based techniques and libraries around. Nowadays, it is very easy and possible with :has().
📕 To learn more:
- react.dev/reference/re...
- react.dev/reference/re...
<Activity> – React
The library for web and native user interfaces
react.dev
October 24, 2025 at 6:29 PM
📕 To learn more:
- react.dev/reference/re...
- react.dev/reference/re...
⭐️ This can also open up possible new patterns, like pre-fetching a hidden component's data even if it's hidden and immediately showing it to user when they navigate!
October 24, 2025 at 6:29 PM
⭐️ This can also open up possible new patterns, like pre-fetching a hidden component's data even if it's hidden and immediately showing it to user when they navigate!
💡 Think that you have multiple tabs on a screen. To preserve the state of a tab while another tab is being displayed, you should lift its state up and now its logic should live in its parent component. With <Activity> it is possible to co-locate a component and its state!
October 24, 2025 at 6:29 PM
💡 Think that you have multiple tabs on a screen. To preserve the state of a tab while another tab is being displayed, you should lift its state up and now its logic should live in its parent component. With <Activity> it is possible to co-locate a component and its state!
🤯 Instead of unmounting a component, <Activity> can just hide it and preserve its state. Looks just like using display: none at first, and it actually uses it under the hood. It also handles effects, cleaning them up so the hidden components don't have unexpected side effects.
October 24, 2025 at 6:29 PM
🤯 Instead of unmounting a component, <Activity> can just hide it and preserve its state. Looks just like using display: none at first, and it actually uses it under the hood. It also handles effects, cleaning them up so the hidden components don't have unexpected side effects.
🤯 Instead of unmounting a component, <Activity> can just hide it and preserve its state. Looks just like using display: none at first, and it actually uses it under the hood. It also handles effects, cleaning up them so the hidden components won't have unexpected side effects.
October 24, 2025 at 2:41 PM
🤯 Instead of unmounting a component, <Activity> can just hide it and preserve its state. Looks just like using display: none at first, and it actually uses it under the hood. It also handles effects, cleaning up them so the hidden components won't have unexpected side effects.
May 5, 2025 at 5:31 PM
🤔 Also, it does not simply read files as a string and search for "TODO" keyword since it is error prone. Instead, it finds all TS/JS files, gets AST of each file, filters comments, searches for TODO keyword, gets commit date of the line.
May 5, 2025 at 5:31 PM
🤔 Also, it does not simply read files as a string and search for "TODO" keyword since it is error prone. Instead, it finds all TS/JS files, gets AST of each file, filters comments, searches for TODO keyword, gets commit date of the line.
🧑💻 As a weekend project, I built this tool and made a few small improvements over the next days. You can use it locally or in a CI pipeline to catch old TODOs automatically—and debate with your team whether they still matter.
May 5, 2025 at 5:31 PM
🧑💻 As a weekend project, I built this tool and made a few small improvements over the next days. You can use it locally or in a CI pipeline to catch old TODOs automatically—and debate with your team whether they still matter.
⭐️ So, I thought, "it’d be nice to have a minimal tool to find TODOs older than a given number of days and decide if they’re worth fixing or just noise".
May 5, 2025 at 5:31 PM
⭐️ So, I thought, "it’d be nice to have a minimal tool to find TODOs older than a given number of days and decide if they’re worth fixing or just noise".
👀 We’ve all seen TODO comments like "TODO: will fix this later. For now it is good" that stick around for years. These are either tech debt or completely meaningless, and the project often continues just fine without addressing them.
May 5, 2025 at 5:31 PM
👀 We’ve all seen TODO comments like "TODO: will fix this later. For now it is good" that stick around for years. These are either tech debt or completely meaningless, and the project often continues just fine without addressing them.
👉 For older React versions, you can stick with the older versions. But for React v19, I recommend using the latest versions.
📖 To learn more:
- www.npmjs.com/package/reac...
- www.npmjs.com/package/reac...
- react.dev/blog/2024/12...
📖 To learn more:
- www.npmjs.com/package/reac...
- www.npmjs.com/package/reac...
- react.dev/blog/2024/12...
react-infinite-scroll-hook
A simple hook to create infinite scroll components. Latest version: 6.0.0, last published: 26 minutes ago. Start using react-infinite-scroll-hook in your project by running `npm i react-infinite-scrol...
www.npmjs.com
May 3, 2025 at 12:58 PM
👉 For older React versions, you can stick with the older versions. But for React v19, I recommend using the latest versions.
📖 To learn more:
- www.npmjs.com/package/reac...
- www.npmjs.com/package/reac...
- react.dev/blog/2024/12...
📖 To learn more:
- www.npmjs.com/package/reac...
- www.npmjs.com/package/reac...
- react.dev/blog/2024/12...