はてなブックマーク

Security is important. Nobody wants to be the person advocating for less security. So nobody wants to say it. But somebody has to say it. So I guess I’ll say it. The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling. Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats t

There are many articles written about React performance optimizations. In general, if some state update is slow, you need to: Verify you’re running a production build. (Development builds are intentionally slower, in extreme cases even by an order of magnitude.) Verify that you didn’t put the state higher in the tree than necessary. (For example, putting input state in a centralized store might no

It was a late evening. My colleague has just checked in the code that they’ve been writing all week. We were working on a graphics editor canvas, and they implemented the ability to resize shapes like rectangles and ovals by dragging small handles at their edges. The code worked. But it was repetitive. Each shape (such as a rectangle or an oval) had a different set of handles, and dragging each ha

I started this decade as a first-year college student fresh out of high school. I was 17, didn’t have a job, didn’t have any industry connections, and really didn’t know shit. And now you’re reading my blog! I would have been proud. I’ve told bits and pieces of my story on different podcasts. Now feels like an appropriate time to write down the parts that were most memorable to me. Every person’s

What Are the React Team Principles?December 25, 2019 During my time on the React team, I’ve been lucky to see how Jordan, Sebastian, Sophie and other tenured team members approach problems. In this post, I’m distilling what I learned from them into a few high-level technical principles. These principles aren’t meant to be exhaustive. This is my personal attempt to formalize observations about how

My previous post included this paragraph: let vs const vs var: Usually you want let. If you want to forbid assignment to this variable, you can use const. (Some codebases and coworkers are pedantic and force you to use const when there is only one assignment.) This turned out to be very controversial, sparking conversations on Twitter and Reddit. It seems that the majority view (or at least, the m

あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？　[]ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使

Algebraic Effects for the Rest of UsJuly 21, 2019 Have you heard about algebraic effects? My first attempts to figure out what they are or why I should care about them were unsuccessful. I found a few pdfs but they only confused me more. (There’s something about academic pdfs that makes me sleepy.) But my colleague Sebastian kept referring to them as a mental model for some things we do inside of

You’ve discovered something new. You haven’t seen solutions quite like this before. You try to keep your ego in check and be skeptical. But the butterflies in your stomach won’t listen. You don’t want to get carried away, but deep down you already know it: You’re onto something. This idea turns into a project. The first commit is just 500 lines. But in a few days, you build it up just enough to st

When people start learning React, they often ask for a style guide. While it’s a good idea to have some consistent rules applied across a project, a lot of them are arbitrary — and so React doesn’t have a strong opinion about them. You can use different type systems, prefer function declarations or arrow functions, sort your props in alphabetical order or in an order you find pleasing. This flexib

You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said. But sometimes when you useEffect, the pieces don’t quite fit together. You have a nagging feeling

How Are Function Components Different from Classes?March 3, 2019 How do React function components differ from React classes? For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore. Maybe you’ve heard one of them is better for performance. Which one? Many of such benchmarks are flawed so I’d be careful drawing conclu

Making setInterval Declarative with React HooksFebruary 4, 2019 If you played with React Hooks for more than a few hours, you probably ran into an intriguing problem: using setInterval just doesn’t work as you’d expect. In the words of Ryan Florence: I’ve had a lot of people point to setInterval with hooks as some sort of egg on React’s face Honestly, I think these people have a point. It is confu

Most tutorials introduce React as a UI library. This makes sense because React is a UI library. That’s literally what the tagline says! I’ve written about the challenges of creating user interfaces before. But this post talks about React in a different way — more as a programming runtime. This post won’t teach you anything about creating user interfaces. But it might help you understand the React

前の記事で、知識のギャップについて認めるということについて話しました。 あなたは私が平凡な提案をすると結論づけるかもしれませんが、違います！この記事は広い分野を扱います。 私はあなたが「どこからでも始める」ことができ、特定の順序で技術を学ぶ必要はないと強く信じます。しかし私は専門知識を得ることにも大きな価値を置いています。個人的には、主にユーザーインターフェイスの作成に興味を持っていました。 私は、自分の知る価値のある物を熟考し続けています。 確かに、私はいくつかのテクノロジ(JavaScriptやReactなど)に精通していますが、経験から得られるもっと重要な教訓はとらえどころがありません。私はそれらを言葉にしようとはしませんでしたが、初めてそれらを一覧にして述べます。 テクノロジとライブラリに関する「学習ロードマップ」はたくさんあります。2019年にどのライブラリが流行するのでしょうか

Originally written in: English • Русский (авторский перевод) Translated by readers into: Deutsch • Español • Français • Português do Brasil • Svenska • Tiếng Việt • తెలుగు • 日本語 • 简体中文 • 繁體中文 • 한국어 Read the original • Improve this translation • View all translated posts 多くの人は、私が実際に持っている知識量より遥かに多くのことを知っていると思い込んでいる。それは悪い事ではないので文句を言っているわけではない。(世の少数派の人達は、努力して資格を得ているにもかかわらず、逆の偏見に苦しめられている。それはイケてない。) この記

The Elements of UI EngineeringDecember 30, 2018 In my previous post, I talked about admitting our knowledge gaps. You might conclude that I suggest settling for mediocrity. I don’t! This is a broad field. I strongly believe that you can “begin anywhere” and don’t need to learn technologies in any particular order. But I also place great value in gaining expertise. Personally I’ve mostly been inter

Things I Don’t Know as of 2018December 28, 2018 People often assume that I know far more than I actually do. That’s not a bad problem to have and I’m not complaining. (Folks from minority groups often suffer the opposite bias despite their hard-earned credentials, and that sucks.) In this post I’ll offer an incomplete list of programming topics that people often wrongly assume that I know. I’m not

Why Do React Hooks Rely on Call Order?December 13, 2018 At React Conf 2018, the React team presented the Hooks proposal. If you’d like to understand what Hooks are and what problems they solve, check out our talks introducing them and my follow-up article addressing common misconceptions. Chances are you won’t like Hooks at first: They’re like a music record that grows on you only after a few good

What makes a great API? Good API design is memorable and unambiguous. It encourages readable, correct and performant code, and helps developers fall into the pit of success. I call these design aspects “first order” because they are the first things a library developer tends to focus on. You might have to compromise on some of them and make tradeoffs but at least they’re always on your mind. Howev

If you used React you might be familiar with type, props, key, and ref fields. But what is $$typeof? And why does it have a Symbol() as a value? That’s another one of those things that you don’t need to know to use React, but that will make you feel good when you do. There’s also some tips about security in this post that you might want to know. Maybe one day you’ll write your own UI library and a

A personal blog by Dan Abramov

I heard Hooks are the new hotness. Ironically, I want to start this blog by describing fun facts about class components. How about that! These gotchas are not important for using React productively. But you might find them amusing if you like to dig deeper into how things work. Here’s the first one. I wrote super(props) more times in my life than I’d like to know: class Checkbox extends React.Comp

How Does React Tell a Class from a Function?December 2, 2018