component library作り#1: controlled vs uncontrolled

こんにちは。 Showcase Gigハブチーム所属のリョです。 o:der platformの立ち上げから二年弱になりました。frontendに使われているcomponentもゼロから作ってきました。当然試行錯誤しながら実装してきたためいろいろ勉強になったこともあります。今までの経験と学びをブログとして残したいのでこういうシリーズを始めていきたいです。

chapter1はcontrolled componentとuncontrolled componentから学んだことについてシェアさせてください。

前置き

すでにofficial documentに書いています。reactには二種類のcontrolled componentとuncontrolled componentがあります。参考まで。

• https://reactjs.org/docs/uncontrolled-components.html

• https://beta.reactjs.org/learn/sharing-state-between-components#controlled-and-uncontrolled-components (言うまでもなく新しい方がわかりやすいです)

componentを作っていた時も同じ悩みと出会いました。controlled componentにするか、uncontrolled componentにするか。 簡単に言うと。

表示の通りでtopのnavigationリンクをクリックすれば下のcontent枠は違う内容を表示するtab componentです。 課題になるのはcontent切り替えの処理はどこに置いた方が良いかのです。つまりpropsとして公開した方(controlled)が良いですか?あるいは内部のstateとして扱った方(uncontroled)が良いですか?

要求

official documentの書いた通り、controlledなら親componentは細かくコントロールできます。ただ8,9割りの場合は隅々まで制御する必要がなくて切り替え正しく動いているなら十分なのです。よって大半のケースはcontrolledがいらないです。

const ControlledTabs = ({
  active,
  onChange,
}: {
  active: number;
  onChange: (active: number) => void;
}) => {
  return (
    // ...
  );
}

要するには、activeとonChange書かなくても良い利便性といざという時の拡張性を担保する必要があります。自分も最初は迷ってました。利便性と拡張性はだいたい矛盾していて片方しか取れないです。

解決

初めてのcomponent library作りですので、ほかのlibraryを見ながら実装していました。ある日react bootstrap tab componentを見てあれ結構似ているなと思って、source codeを見たらuncontrolableというlibraryで実現しています。

code

React Ts (forked) - StackBlitz

仲間募集

Showcase Gigでは、一緒に働く仲間を探しています！

この記事ではエンジニア組織の文化を少しお見せしましたが、もっと知りたいという方は以下の採用ページを御覧ください！

Entrance Book for Product Team