I've got a weekly newsletter where I share this type of content. It's not the link aggregator type, but it contains a brand new post & an old one I share
It's all about the frontend: JS/TS, React, DivOps, CSS & more! Subscribe to get your learn on ๐
Here is a quick React custom Hook that supports copying text to the system clipboard. It also returns a copied/failed status that can be reflected in the UI
(I remember the days when we could only do this w/ Flash ๐ญ)
more details in the thread ๐งต๐๐พ
useCopyToClipboard returns a copy function that the UI calls when the user wants to copy the text (likely a button click). It updates the status based on the success/failure of writing to the clipboard
It uses useCallback to ensure a stable function reference
๐งต๐๐พ
It also uses useEffect to set a timeout that will reset the status after a specified amount of time. This basically makes the status fleeting, which is a typical user experience
Using objects/arrays in deps for React useEffect can cause it to run the effect on *every* re-render even if contents are the same cuz the references are different
We've got a couple of options...
1๏ธโฃ Depend on the obj properties instead of the entire obj
/thread ๐งต๐๐พ
2๏ธโฃ Duplicate the object within the effect when the *entire* object is needed. useEffect then depends on the pieces needed to create the object
In general creating object literals is cheap so the perf wins from optimized useEffect should outweigh the duplication
๐งต๐๐พ
3๏ธโฃ Memoize/cache the object w/ useMemo Hook if creating the object is too expensive to do it twice. The obj is now safe to use in deps
This is suggested by the `react-hooks/exhaustive-deps` ESLint rule (part of `eslint-plugin-react-hooks` which you should totally be using)
I used to tell folks learning React to learn JS really well first. I had good intentions but was still gate-keeping ๐
But I do think knowing modern JS can really level-up your React skills and I've got top 10 features I think will help you be more awesome-r ๐ฅ๐ฅ
[๐งต thread]
1. ES Modules
I see lots of confusion about when to use named vs default imports. The import style depends on how it was exported (named or default)
Named imports go within the curly braces & the single default import is outside of them ๐ค
2. Arrow functions
Arrow functions can exist everywhere within your React app. Some folks (like myself) replace all functions with arrows while others only use them in spots
They really win w/ character savings but for those unfamiliar w/ the syntax they can lose w/ clarity ๐ง