ReactのカスタムHooksをカジュアルに使ってコードの見通しを良くしよう
もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック
Hooks FAQ – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. The new documentation pages teaches React with Hooks. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This page answers some of the frequently asked questions about Hooks. Adoption Strategy Which versions of React include Hooks? Do I need to rewrite all
非同期処理にredux-thunkやredux-sagaは必要無い - Qiita
状態管理に redux を使っている人は以下の様なことをやりたいことがあるでしょう。 ログイン処理でフォームを Submit した時に API を叩いて、返ってきた Auth 情報を store に保持する。 ページを開いた時に API を叩いて、返ってきた Response を store に保持する。 このような非同期処理の結果を redux に保持することが必要な時にはよく redux-thunk, または redux-sagaが採用されていた。 今回は非同期処理に thunk も saga も使う必要なくなったのでは？と言う話です。 なお、筆者は redux-saga についてはそこまで使ったことが無いので、この記事では主にredux-thunkのリプレイスについて書きます。 tl;dr; react-redux の hooks api を用いて custom hooks に非同期
React Hooksとカスタムフックが実現する世界 - ロジックの分離と再利用性の向上 - Qiita
はじめに React HooksはReact 16.8 で追加された新機能であり、state などの React の機能をクラスを書かずに使えるようになります。 React Hooks以前は、ロジックの再利用がコンポーネントに依存してしまいロジック単独でのモジュール化が難しいという問題がありました。 しかしReact Hooksのカスタムフックという独自のフックを作成する機能を使うことで、Viewに依存することなくロジックだけを再利用することができるようになります。 この記事では、v1からv6まで改善していく様子を見て頂くことでReact Hooksの利用方法を紹介します。 今回の実例ではコンポーネントのコード量は以下のように削減されます。 実例紹介 コンポーネント間のページネーションを実装するuseLocalHistoryカスタムフックを作成します。 ブラウザのhistory APIのよ
フックをざっくり覚えたいメモ - Qiita
Reactのフックを勉強中、公式ドキュメントを読んだが、 読んでいる間はわかったつもりでも、昼飯から返ってくる頃には忘れていたので、メモを書いて覚えようと思った次第。 書いてる本人はReactはズブの素人なので、ツッコミ等あればコメントお願いします。 フック(hook)とは 元々Reactはコンポーネントをクラスで書いてたのだけど、関数でもかけたりする。 ただし関数でコンポーネントを作るとstateが使えなくなる問題があった。 これを解決するのがフック。 フックを使うことで、関数コンポーネントの中にローカルなstateを作成することができる。 ステートフック ざっくりした使い方をソースコードを元に解説。 const Calc = () => { const [a, setA] = useState(0); const [b, setB] = useState(0); return ( <d
Simple Code Reuse with React Hooks
Code reuse is very necessary for scaling. We’ll be looking at what React hooks are and how we can use them to keep our components D.R.Y. What are React Hooks?Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC. So it is not recommended to use them in production. Why is
Introducing Hooks
【所要時間】 2時間くらい(2019年2月7日) 【概要】 Introducing Hooksを日本語に翻訳するReact v16.8: The One With Hooksとかなり重複する内容。【要約・学んだこと】 HooksはReact 16.8で新たに追加された。stateやその他Reactの機能をclassを書かずに使うことが出来る。 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={()
React Hooks 大喜利 Advent Calendar 2018 - Qiita
The Qiita Advent Calendar 2018 is supported by the following companies, organizations, and services.
React Class features vs. Hooks equivalents
I gave a talk during a recent meetup at Soluto HQ — Intro to React Hooks. While preparing for the presentation, I fell completely in love with Hooks. Although I was skeptical at first glance, I quickly realized how easy it is to use them and how they make perfect sense. You can really tell how much thought was put into the API and how it solves real life problems. You can find a video of my talk a
作って理解するReact Hooks - Qiita
Reactを利用している方は、何日か前、React 16.xのロードマップが発表されたことは記憶に新しいかと思います。 React 16.x RoadMap それによれば、少し前に発表されて以来界隈に旋風を巻き起こしているReact Hooksが含まれる16.7は、~Q1 2019 とありますね。（少し前はWinter 2018〜2019と書いてあった気がするのですが、もう少し明確な表記に変わりました。）2019年はReact Hooksの年になりますから（多分）、ぜひ今年のうちにReact Hooksを使いこなせるようになりたいものです。 「React Hooksとは何か」とか「React Hooksを触ってみた」みたいな記事は他にもいい記事がありますから、そのような内容はこの記事ではさらっと流します。代わりにこの記事では、React Hooksの本質はCustom Hooks（カスタム
Making Sense of React Hooks
(This article is also available on the DEV community without the paywall.) This week, Sophie Alpert and I presented the “Hooks” proposal at React Conf, followed by a deep dive from Ryan Florence: I strongly recommend to watch this opening keynote to see the problems we’re trying to solve with the Hooks proposal. However, even an hour is a big time investment, so I decided to share a few thoughts o
Introducing Hooks – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach React with Hooks: Quick Start Tutorial react: Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count
React Hooksでredux / react-reduxでやってたことを色々やってみる - Qiita
1. useReducerでcombineReducersだけ使ってみる reduxにおいてはcombineReducersを利用してネストすることが出来た。 hooksの機能としてはこの部分だけは提供されてないので、reduxから流用して組み合わせることをやってみる 例えばこんなreducer import { combineReducers } from "redux" const counter = (state = 0, action) => { switch (action.type) { case "INCREMENT": return state + 1 case "DECREMENT": return state - 1 } return state } const inputValue = (state = "foo", action) => { switch (acti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adopt React Hooks in Legacy Apps using HoCs and Render Props
React Hooks meets Redux
(翻訳) React Hooks は魔法ではなく、ただの配列だ
Reimplementing React hooks