Published on in JavaScript and React
Last updated on
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.
React.forwardRefPublished on in JavaScript and React
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?
useReducerPublished on in JavaScript and React
Say goodbye to useState
and a silly toggler function calling the state setter.
Be cool and use a tiny reducer instead.
Published on in JavaScript, Mithril.js and React
AutoAnimate is a JS library that provides simple animations with no effort. Works with Mithril.js, React and any other JS app.
type="button"Published on in JavaScript, React and TypeScript
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.
dangerouslySetInnerHTMLPublished on in JavaScript, React and TypeScript
Last updated on
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.
Published on in JavaScript and React
React is marketed as a view library, but it's more accurately a (view component) framework.
Published on in JavaScript, Mithril.js, Rant and React
Last updated on
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.
Published on in JavaScript and React
Last updated on
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.
Published on in Episerver, JavaScript and React
Last updated on
Also known as Episerver/Idio Content Recommendations. The usual way of using a Mustache template can be circumvented by using a JavaScript proxy.
Published on in JavaScript, React and TypeScript
Last updated on
I.e. props that depend on other props. You can require and forbid certain prop combinations by utilizing TypeScript's union and intersection types.
useStateMachine: ½ kB state machine hook for ReactPublished on in JavaScript and React
A state machine is a bit like useReducer,
but with greater constraints (in a good way).
This state machine hook is tiny.
Published on in JavaScript and React
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.
Published on in JavaScript and React
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.
Published on in Clean code, JavaScript and React
Last updated on
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.
Published on in JavaScript, React and Testing
React context is normally updated inside the React app. Here's a hacky way how I circumvented that restriction in a test file.
Published on in JavaScript, React and Testing
Such naming helps you create tests that resemble the way your users use your app.
Published on in Accessibility, JavaScript, React and Testing
Accessible queries take into account the semantic meaning of HTML elements. Such queries help you write more accessible apps.
Published on in Episerver, JavaScript and React
Thoughts on how to efficiently use React to render Episerver blocks embedded in TinyMCE fields.
Published on in JavaScript and React
Last updated on
If you need form input values only at the time of form submission, uncontrolled inputs can be nice to work with.
Published on in JavaScript, Mithril.js and React
Last updated on
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?!