TypeScript and React: Hooks
Hooks have been announced at React Conf 2018. Check out this page for more details. I think they’re pretty awesome. Probably game-changing! Hooks heave formerly “stateless” functional components to … basically everything traditional class components can be. With a much cleaner API! Just quickly after their release in React 16.7., React typings in DefinitelyTyped got an update as well. Check out ho
React Hooksのメモ化のための第二引数の配列にオブジェクトを突っ込んだときの挙動について - ひと夏の技術
タイトルが長い。 useEffectとかuseMemoとかの第一引数に渡した関数を発火させるかどうかの条件指定とも言える第二引数の配列にオブジェクトをまるごと入れたらどうなるのか というはなし。 勘違いしそうなので最初に説明しておくと、 useMemo(()=> someFunction(), myObject) ではなくて useMemo(()=> someFunction(), [myObject]) です。配列の中にオブジェクトであって第二引数に直接オブジェクトではない。 なお当記事はReact16.8.1でのバージョン時点でのはなしです。 それで、タイトルのことをコードで書くとこう。当記事ではuseMemoを例にその実態を追う。 const myObj1 = { foo: "foo", bar: "bar", baz: { qux: 100, quux: { deepFoo: 'I
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた
Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ
最近Reactを始めた人向けのReact Hooks入門
ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo
Debouncing with React Hooks
Today I'm going to show you how to build a useDebounce React Hook that makes it super easy to debounce API calls to ensure that they don't execute too frequently. I've also put together a demo that uses our hook. It searches the Marvel Comic API and uses useDebounce to prevent API calls from being fired on every keystroke. Pretty nifty huh? Okay, now on to the code! First let's figure out how we w
React HooksとMobXをあわせて使う - console.lealog();
最近はもっぱらWebRTCの世界にどっぷりでしたが、フロントエンドのこともちゃんとやってます！ SkyWayにはショーケースとしてWeb会議アプリがあるんですが、それをこの度リライトしてました。 リライトする理由としては・・・、 当時の設計ままでは改修が面倒なバグが見つかった 単にUIがダサい WebRTCフロントエンドをしばらくやって得たノウハウも反映したい などなど、まあ理由つけて書き直した感じです。 で、どうせ書き直すならってことで、ReactのHooksも使い込みつつ、MobXと混ぜた場合にどうなるか？ってのを味見しました。 ということを、将来の自分が見返せるようにするためのメモ。 最近のMobXについて MobXの本体は最新がv5で、これはしばらく変わってないです。 今のところv6の気配もない・・？ Reactバインディングである`mobx-react`は、もうすぐv6が出そうで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
