If you send a single email to a bunch of email addresses,
and some of the addresses are aliases,
i.e. they point to the same email inbox,
chances are high that only one copy of the email is delivered to that inbox.
A little helper function
to retry a function automatically a limited number of times (or until success)
and with a certain delay between retries.
Useful e.g. when working with a flaky API.
If I'm already displaying data that I have successfully fetched with SWR,
and then another fetch call fails (when revalidating the data),
I don't want to replace the data view with an error view.
Here's how to avoid that.
A component wrapped in React.forwardRef
normally expects to receive a ref from its parent component.
What if you want the component to have a ref
even if it doesn't receive one from its parent?
"Given an array of coins and a target amount,
return all combinations of coins that add up to the amount,
or an empty array if no such combinations exist."
For example,
mutating a reducer function's accumulator array can be better
than religiously avoiding mutations and returning only new arrays from the reducer.
A <button> element defaults to type="submit"
which can cause accidental form submissions.
Make type="button" the default in your Button component
to make your life easier.
To handle internal link clicks when using dangerouslySetInnerHTML,
attach click event listeners to the rendered links.
In the listener, push the link to the browser history.
Functions composed together with compose()
are called from right to left.
It feels unintuitive at first,
but it's conventional
and kind of makes sense.
React's ecosystem is large,
which is a good thing:
lot's of great libraries to use.
But it's also a bad thing:
most of those libraries are compatible only with React.
HTM provides a transpiler-free alternative to JSX via tagged templates.
HTM has some limitations,
but can be used in browsers
and can be good for smaller projects.
Fun way to solve the simple puzzle.
Infinitely repeating arrays
and mapping over multiple arrays
almost makes the remainder/modulo operator (%) unnecessary.
Say goodbye to ../ times million
and use absolute import paths from the app's root directory instead.
Two contenders:
Basetag
and
Sultan's sexy-require! 🤺
A common solution is to scroll to top every time the page changes.
That's incorrect:
the page should be scrolled to top only when navigating to new pages,
not when navigating back or forward.
Normally you would use one-way data binding in React apps:
parent components own data and pass it to children.
You can mimic two-way data binding with a custom hook.
A multi-site React project has likely two kinds of components:
common components and site-specific components.
There are a few ways to handle site-specific logic in common components.
There's an ESLint rule to prevent importing certain files in certain folders.
I needed this in a multi-site project
to prevent importing site-specific components in other sites' folders.
Pass an array of strings
and get back a string with the array items separated by commas,
except with the last comma replaced with the word "and" or "or."
Like "item 1, item 2 and item 3."
And Date.parse() too.
They are strongly discouraged
due to browser differences and inconsistencies.
Use only proper date time formats
or use a library for parsing fancy formats.
The error is thrown when calling a function
whose this keyword isn't referring to the object where it originally did,
i.e. when the "context" of the function is lost.
E.g. how to capture overlapping pairs of letters from the string 'abcde',
i.e. 'ab', 'bc', 'cd' and 'de'.
Spoiler: with lookahead and lookbehind assertions.
My quick notes on a funny but informative video (11:27)
that explains how tail call optimization (TCO) works.
Bonus: does JS support TCO?
Spoiler: yes but no.
Requests with the Accept header set to application/json
are automatically routed to Content Delivery API.
Here's how to bypass it
and make the request go to a page controller instead.
JSX is just JS under the hood.
Hyperscript is like that JS,
but better.
Example:
h('a.link', { href }, 'Click me')
is nicer than
<a className="link" href={href}>Click me</a>,
right? Right?!