サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
kentcdodds.com
Fixing a Memory Leak in a Production Node.js AppJanuary 12th, 2023 — 15 min read A few months ago, I wrote about my migration from Postgres to SQLite. I ended that with a "to be continued" because I had a number of issues related to memory and CPU spikes that I couldn't really explain. For a while I thought it was bugs in LiteFS (which I'm using to get distributed SQLite for my distributed node ap
I Migrated from a Postgres Cluster to Distributed SQLite with LiteFSNovember 21st, 2022 — 22 min read Over the last few months, I've been heads-down on building the content for EpicWeb.dev. And I've been building it all in the open on my YouTube channel. If you've been watching my EpicWeb.dev live streams, you'll know that I've been building the app we'll use to learn web dev: Rocket Rental 🚀. Wi
Remix: The Yang to React's YinMarch 24th, 2022 — 11 min read I've been building React applications since 2015. Since then, React was the biggest single productivity boost for my development by a long shot. React's declarative model for rendering UI based on state drastically simplified the way I thought about building UIs for the web. It also gave me a great way to think about state that was miles
kentcdodds.com is completely custom built by me (and team) using Remix. After writing tens of thousands of lines of code using this framework, I have developed a great appreciation for what this framework can do for me and the users of my site. I want to tell you about some of it. In a sentence Here's the core reason I love using Remix to build websites: Remix enables me to build amazing user expe
How I built a modern website in 2021September 29th, 2021 — 34 min read For over half of 2021, I worked on a complete rewrite of kentcdodds.com. You're reading this on the rewrite of this site! Are you using dark mode or light mode? Have you signed in and selected your team yet? Have you tried to call into the Call Kent Podcast? This blog post isn't about these and other features of the new site, b
"The Testing Trophy" 🏆 A general guide for the **return on investment** 🤑 of the different forms of testing with regards to testing JavaScript applications. - End to end w/ @Cypress_io ⚫️ - Integration & Unit w/ @fbjest 🃏 - Static w/ @flowtype 𝙁 and @geteslint ⬣ x.com
Super Simple Start to ESModules in Node.jsApril 8th, 2021 — 3 min read On April 30th 2021, Node v10 will officially reach it's "end of life" (learn more on the Node Releases page). This is exciting because it means that every supported version of the Node.js JavaScript runtime will support Node's official EcmaScript Modules! There are mixed feelings on this change (some would have preferred we sti
Use react-error-boundary to handle errors in ReactJuly 20th, 2020 — 8 min read What's wrong with this code? import * as React from 'react' import ReactDOM from 'react-dom' function Greeting({subject}) { return <div>Hello {subject.toUpperCase()}</div> } function Farewell({subject}) { return <div>Goodbye {subject.toUpperCase()}</div> } function App() { return ( <div> <Greeting /> <Farewell /> </div>
How to write a Constrained Identity Function (CIF) in TypeScriptMarch 9th, 2021 — 10 min read In How to write a React Component in TypeScript, I typed an example React component. Here's where we left off: const operations = { '+': (left: number, right: number): number => left + right, '-': (left: number, right: number): number => left - right, '*': (left: number, right: number): number => left * r
How to write a React Component in TypeScriptMarch 4th, 2021 — 8 min read Here's our component without types: const operations = { '+': (left, right) => left + right, '-': (left, right) => left - right, '*': (left, right) => left * right, '/': (left, right) => left / right, } function Calculator({ left, operator, right }) { const result = operations[operator](left, right) return ( <div> <code> {lef
TypeScript Function SyntaxesFebruary 25th, 2021 — 15 min read In JavaScript itself, there are lots of ways to write functions. Add TypeScript to the mix and all of a sudden it's a lot to think about. So with the help of some friends, I've put together this list of various function forms you'll typically need/run into with simple examples. Keep in mind that there are TONS of combinations of differe
Listify a JavaScript ArrayFebruary 18th, 2021 — 6 min read When you want to display a list of items to a user, I'm afraid .join(', ') just won't cut it: console.log(['apple'].join(', ')) // apple // looks good console.log(['apple', 'grape'].join(', ')) // apple, grape // nah, I want "apple and grape" console.log(['apple', 'grape', 'pear'].join(', ')) // apple, grape, pear // wut? Ok, so bust out y
State Colocation will make your React app fasterSeptember 23rd, 2019 — 11 min read One of the leading causes to slow React applications is global state, especially the rapidly changing variety. Allow me to illustrate my point with a super contrived example, then I'll give you a slightly more realistic example so you can determine how it can be more practically applicable in your own app. Here's th
useState lazy initialization and function updatesAugust 3rd, 2020 — 8 min read If you've been working with React for a while, you've probably used useState. Here's a quick example of the API: function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount(count + 1) return <button onClick={increment}>{count}</button> } So, you call useState with the initial state
Use ternaries rather than && in JSXJuly 27th, 2020 — 5 min read What's wrong with this code? function ContactList({ contacts }) { return ( <div> <ul> {contacts.length && contacts.map((contact) => ( <li key={contact.id}> {contact.firstName} {contact.lastName} </li> ))} </ul> </div> ) } Not sure? Let me ask you another question. What would happen with the above code if contacts was []? That's right!
DRY DRY (an acronym for "Don't Repeat Yourself"), is an old software principle that Wikipedia sums up like this: Every piece of knowledge must have a single, unambiguous, authoritative representation within a system This is generally a good practice that I typically subscribe to (though less dogmatically than that definition seems to encourage). The biggest problem I've had with code duplication (
What's wrong with this test? // __tests__/checkout.js import * as React from 'react' import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { client } from '#app/utils/api-client' jest.mock('#app/utils/api-client') test('clicking "confirm" submits payment', async () => { const shoppingCart = buildShoppingCart() render(<Checkout shoppingCa
Testing Implementation DetailsAugust 17th, 2020 — 12 min read Back when I was using enzyme (like everyone else at the time), I stepped carefully around certain APIs in enzyme. I completely avoided shallow rendering, never used APIs like instance(), state(), or find('ComponentName'). And in code reviews of other people's pull requests I explained again and again why it's important to avoid these AP
Common mistakes with React Testing LibraryMay 4th, 2020 — 15 min read Hi there 👋 I created React Testing Library because I wasn't satisfied with the testing landscape at the time. It expanded to DOM Testing Library and now we have Testing Library implementations (wrappers) for every popular JavaScript framework and testing tool that targets the DOM (and even some that don't). As time has gone on,
How to test custom React hooksMarch 22nd, 2020 — 10 min read If you're using react@>=16.8, then you can use hooks and you've probably written several custom ones yourself. You may have wondered how to be confident that your hook continues to work over the lifetime of your application. And I'm not talking about the one-off custom hook you pull out just to make your component body smaller and organi
React Production Performance MonitoringMarch 16th, 2020 — 4 min read We should always ship fast experiences to our users, but sometimes something slips through our PR review process and our users start having a slow experience. Unless they complain to us, we often have no way of knowing that things are going so slow for them. User complaints is not a great policy for quality control. Because we ca
React Hooks: Compound ComponentsFebruary 18th, 2019 — 5 min read A few weeks ago I did a DevTips with Kent livestream where I show you how to refactor the compound components pattern from a class component to a function component with React hooks: If you're unfamiliar with compound components, then you probably haven't watched my Advanced React Component Patterns course on egghead.io or on Fronten
Stop using isLoading booleansMarch 2nd, 2020 — 10 min read Let's play around with the Geolocation API a bit and learn about the perils of isLoading booleans (and similar booleans like: isRejected, isIdle, or isResolved) while we're at it. I'll be using React to demonstrate this, but the concepts apply generally to any framework or language. function geoPositionReducer(state, action) { switch (acti
Here's the code for that (if you were to do it with class components, don't worry a function version is coming later in the post): class UsernameFormClass extends React.Component { state = { status: 'idle', error: null } handleSubmit = async (event) => { event.preventDefault() const newUsername = event.target.elements.username.value this.setState({ status: 'pending' }) try { await this.props.updat
Static vs Unit vs Integration vs E2E Testing for Frontend AppsJune 3rd, 2021 — 13 min read In my interview "Testing Practices with J.B. Rainsberger" available on TestingJavaScript.com he gave me a metaphor I really like. He said: You can throw paint against the wall and eventually you might get most of the wall, but until you go up to the wall with a brush, you'll never get the corners. 🖌️ I love
How to use React Context effectivelyJune 5th, 2021 — 11 min read In Application State Management with React, I talk about how using a mix of local state and React Context can help you manage state well in any React application. I showed some examples and I want to call out a few things about those examples and how you can create React context consumers effectively so you avoid some problems and im
We all want to have codebases that are easy to maintain, so we start out with the best of intentions to make our codebase (or our corner of the codebase) maintainable and easy to understand. Over time, as a codebase grows, it can become more and more difficult to manage dependencies (JS, CSS, images, etc.). As projects grow, an increasing amount of your codebase becomes "tribal knowledge" (knowled
Fix the slow render before you fix the re-renderSeptember 9th, 2019 — 7 min read Performance is a serious issue and we should make our apps as fast as possible. How we go about doing that will make a big impact on not only the effectiveness of our optimizations but also the complexity of our code (how quickly we can make improvements and changes in the future). When we're talking about React optim
Avoid Nesting when you're TestingJuly 29th, 2019 — 14 min read I want to show you something. What I'm going to show is a general testing principle, applied to a React component test. So even though the example is a React one, hopefully it helps communicate the concept properly. Note: my point isn't that nesting is bad by itself, but rather that it naturally encourages using test hooks (such as bef
次のページ
このページを最初にブックマークしてみませんか?
『Kent C. Dodds』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く