Masayan tech blog.

  1. ブログ記事一覧>
  2. Reactに関する336のインタビュー、質問集から50個厳選して紹介する

Reactに関する336のインタビュー、質問集から50個厳選して紹介する

公開日

この記事は何?

Reactに関する336のインタビュー、質問集という非常に興味深いリポジトリがあったので、紹介します。

引用元：

さすがに336個すべては紹介しきれないので、実務である程度ReactとNext.jsを使ってみて、これは理解しておく必要があるだろうという思想や、ライブラリの概念、記述方法、テクニックを中心に50個に厳選して紹介します。

留意点

  • Hooksが追加されたReact v16がベースになっています。(最新v18でも使用できる知識、テクニックを中心にピックアップしていますので、ご安心を)
  • カテゴリごとにまとめているので、質問の連番が前後しています
  • 以下に関連する記述は割愛しています。(重要度がそこまで高くない、頻繁に使用するものではない、必要になった時に調べれば足りる等の理由から)
    • redux
    • react native
    • create-react-app
    • class component
    • reactのref

Reactというライブラリ・思想について

1.What is React?

リアクトとは何ですか?

押さえるべきポイント

  • シングルページアプリケーション向けのオープンソース フロントエンドJavaScriptライブラリであること
  • 宣言的UIであること
  • Facebook産(Meta)であること

React(aka React.js or ReactJS) is an open-source front-end JavaScript library that is used for building composable user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps based on components in a declarative approach.

React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.

3.What are the major features of React?

React の主な機能は何ですか?

押さえるべきポイント

  • JSXという構文を使用すること
  • Virtual DOMを使用していること
  • 単一データフロー構造となっていること
  • 再利用可能なUI コンポーネントを組み合わせてビューを構築すること

The major features of React are:

Uses JSX syntax, a syntax extension of JS that allows developers to write HTML in their JS code.
It uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive.
Supports server-side rendering which is useful for Search Engine Optimizations(SEO).
Follows Unidirectional or one-way data flow or data binding.
Uses reusable/composable UI components to develop the view.

53.What are the limitations of React?

React の制限は何ですか?

押さえるべきポイント

  • React は単なるビューライブラリであり、完全なフレームワークではないということ
  • 他のSPAライブラリと比べると、比較的学習にコストが必要になること

React is just a view library, not a full framework.
There is a learning curve for beginners who are new to web development.
Integrating React into a traditional MVC framework requires some additional configuration.
The code complexity increases with inline templating and JSX.
Too many smaller components leading to over engineering or boilerplate.

83.What is strict mode in React?

React の厳密モードとは何ですか?

押さえるべきポイント

  • strict modeを有効にすると、安全でないライフサイクルを持つコンポーネントの特定、非推奨の使用法に関する警告、予期せぬ副作用の検出に役立つということ
  • 開発モードにおいてのみ有効になるモードであること

Identifying components with unsafe lifecycles
Warning about legacy string ref API usage
Warning about deprecated findDOMNode usage
Detecting unexpected side effects
Detecting legacy context API

97.Why ReactDOM is separated from React?

ReactDOM が React から分離されるのはなぜですか?

押さえるべきポイント

  • reactとreact-domは別パッケージであること
  • react-domはdom操作のためのapiなどが集約されたパッケージであること
  • Web(React)とネイティブアプリ(React Native)の保守性のため、reactとreact-domは分けれらている

The React team worked on extracting all DOM-related features into a separate library called ReactDOM. React v0.14 is the first release in which the libraries are split. By looking at some of the packages, react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.

To build more environments that React can render to, React team planned to split the main React package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.

235.What is the behavior of uncaught errors in react 16?

React 16 でのキャッチされなかったエラーの動作は何ですか?

押さえるべきポイント

  • どの箇所でも捕捉されなかったエラーは、Reactアプリ全体のアンマウントを引き起こすということ
  • 上記の理由は、破損した UI を完全に削除するよりも、そのままにしておくほうが悪いという考え方に由来していること

In React 16, errors that were not caught by any クラスを作成せずに、再利用可能な反応エラー境界サードパーティ コンポーネントを使用することもできます。つまり、エラー境界にクラス コンポーネントを使用する必要はありません。 will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.

271.Why are you not required to use inheritance?

継承を使用する必要がないのはなぜですか?

押さえるべきポイント

  • Reactで再利用可能なコンポーネントを作成する手段として、継承ではなく合成を推奨していること

In React, it is recommended to use composition over inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior explicitly and safely. Whereas, If you want to reuse non-UI functionality between components, it is suggested to extract it into a separate JavaScript module. Later components import it and use that function, object, or class, without extending it.

300.Can you list down top websites or applications using react as front end framework?

フロントエンドフレームワークとして React を使用している上位の Web サイトまたはアプリケーションをリストアップできますか?

押さえるべきポイント

  • Reactで作成された有名なアプリケーションをいくつか押さえておく

フェイスブック
ウーバー
インスタグラム
ワッツアップ
カーンアカデミー
エアビーアンドビー
ドロップボックス
フリップボード
Netflix
ペイパル

336.Why does strict mode render twice in React?

React で strict モードが 2 回レンダリングされるのはなぜですか?

関連issue

押さえるべきポイント

  • Reactのver18以降で開発モードの場合、2回レンダリングされるということ
  • 理由は、2回レンダリングすることで1度目のレンダリング時に副作用のクリーンアップ処理などが抜けており、1度目のレンダリングと2度目のレンダリングの結果が異なってしまっている等がないかを気づきやすくするため(例えば、サードパーティー製のJSをマウント時に挿入し、それをアンマウント時にクリーンアップし忘れていると、2回目のレンダリング時にはすでにdom上にJSが存在するので、1回目のレンダリング結果と異なってしまっている)

StrictMode renders components twice in development mode(not production) in order to detect any problems with your code and warn you about those problems. This is used to detect accidental side effects in the render phase. If you used create-react-app development tool then it automatically enables StrictMode by default.

JSXについて

4.What is JSX?

JSXとは何ですか?

押さえるべきポイント

  • JSX はJavaScript XMLの略で、JavaScriptファイル内にHTML構文を記述できる仕組みであること

SX stands for JavaScript XML and it is an XML-like syntax extension to ECMAScript. Basically it just provides the syntactic sugar for the React.createElement(type, props, ...children) function, giving us expressiveness of JavaScript along with HTML like template syntax.

In the example below, the text inside <h1> tag is returned as JavaScript function to the render function.

13.What is the difference between HTML and React event handling?

HTML と React イベント処理の違いは何ですか?

押さえるべきポイント

  • React ではキャメルケースでイベント名を記述すること
  • 呼び出す形式で記述しないこと(かっこをつけない)
    • <button onClick={activateLasers}>

Below are some of the main differences between HTML and React event handling,

In HTML, the event name usually represents in lowercase as a convention:

In HTML, you can return false to prevent default behavior:

In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer "activateLasers" function in the first point for example)

18.What is "key" prop and what is the benefit of using it in arrays of elements?

「key」プロパティとは何ですか?要素の配列でそれを使用する利点は何ですか?

押さえるべきポイント

  • 配列の要素をレンダリングする際に必要となる特別な属性のこと
  • キーには一意の値を使用すること
  • キーにより、配列のどの要素が変更されたか、追加されたか、削除されたかをReactが識別し、該当部分のみDOMを更新する等の高パフォーマンス名処理が可能となる
  • 配列をループする際に得られるindexをキーとする方法は最終手段とすること(indexは要素の追加・削除等により変動するものであり、これをキーとして使用するとパフォーマンスに影響を与える可能性があるため。)
  • 配列の要素が変更されないことが保証されていれば、indexを使用してもよい

15.How to pass a parameter to an event handler or callback?

イベントハンドラーまたはコールバックにパラメーターを渡すにはどうすればよいですか?

押さえるべきポイント

以下3つのアプローチが存在する

  • アロー関数を使用し、パラメーターを渡す
    • <button onClick={() => this.handleClick(id)} />
  • bind関数でthisを明示的に指定する
    • <button onClick={this.handleClick.bind(this, id)} />
  • 実行したいアロー関数を返す関数を用意する
    • <button onClick={this.handleClick(id)} />; handleClick = (id) => () => { console.log("Hello, your ticket number is", id); };

17.What are inline conditional expressions?

インライン条件式とは何ですか?

押さえるべきポイント

  • ブレース({})内にjsをかけるので、論理演算を用いて条件付きでjsxをレンダリングする等が可能

45.Why React uses className over class attribute?

Reactがclass属性ではなく、classNameを使用する理由

押さえるべきポイント

JavaScriptのclassをjsx上で使用したい場合、classNameを指定する必要があるということ

46.What are fragments?

フラグメントとは何ですか?

押さえるべきポイント

  • jsx内に複数要素がある場合、必ず1つの要素でラップされた要素をreturnする必要があること
  • fragmentで複数要素をラップしてあげることで、要素でラップするためだけにdivタグなどを余分に追加する必要がなくなる

It's a common pattern or practice in React for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. You need to use either or a shorter syntax having empty tag (<></>).

Below is the example of how to use fragment inside Story component.

function Story({title, description, date}) {
  return (
      <Fragment>
        <h2>{title}</h2>
        <p>{description}</p>
        <p>{date}</p>
      </Fragment>
    );
}

61.How to use styles in React?

React でスタイルを使用するにはどうすればよいですか?

押さえるべきポイント

  • jsx内でstyleタグを使うとき、styleに指定するのは文字列ではなく、オブジェクトであるということ

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")",
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

92.How to loop inside JSX?

JSX内でループするにはどうすればよいですか?

押さえるべきポイント

  • Array.prototype.mapを使用すること

You can simply use Array.prototype.map with ES6 arrow function syntax.

For example, the items array of objects is mapped into an array of components:

<tbody>
  {items.map((item) => (
    <SomeComponent key={item.id} name={item.name} />
  ))}
</tbody>

98.How to use React label element?

Reactのラベル要素の使い方は？

押さえるべきポイント

  • label for はhtmlの予約語であるため、htmlForを使用すること

99.How to combine multiple inline style objects?

複数のインライン スタイル オブジェクトを組み合わせるにはどうすればよいですか?

押さえるべきポイント

  • styleはオブジェクトで指定するので、複数のstyleオブジェクトをマージするには、スプレッド演算子を使用する
<button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
  {"Submit"}
</button>

261.How JSX prevents Injection Attacks?

JSX はどのようにインジェクション攻撃を防ぐのでしょうか?

押さえるべきポイント

  • JSXでは、埋め込まれた値をレンダリングする前にエスケープ処理される。（文字列に変換される）
  • 上記処理により、XSS (クロスサイト スクリプティング)を防ぐことが可能

294.How do you print falsy values in JSX?

JSX で偽の値を出力するにはどうすればよいですか?

押さえるべきポイント

  • false、null、undefinedなどの falsyな値は何も表示されない。表示したい場合は、文字列に変換する必要がある。

The falsy values such as false, null, undefined, and true are valid children but they don't render anything. If you still want to display them then you need to convert it to string. Let's take an example on how to convert to a string,

<div>My JavaScript variable is {String(myVariable)}.</div>

311.Do browsers understand JSX code?

ブラウザは JSX コードを理解できますか?

押さえるべきポイント

  • ブラウザでJSXコードを実行するには、JavaScriptにトランスパイルする必要がある

No, browsers can't understand JSX code. You need a transpiler to convert your JSX to regular Javascript that browsers can understand. The most widely used transpiler right now is Babel.

326.What are the benefits of new JSX transform?

新しい JSX 変換の利点は何ですか?

押さえるべきポイント

  • JSXをピュアなJavaScriptに変換 (transform)する際の内部ロジックがReact v17で変わったということ
  • 上記により、ReactパッケージをインポートせずにJSXを使用することは可能となる(コンパイルされた出力により、バンドル サイズがわずかに改善される)
  • ただし、useStateなどのフックを使用するには、React をインポートする必要がある
// import React from "react"; ←これが不要

function App() {
  return <h1>Good morning!!</h1>;
}

コンポーネントについて

6.How to create components in React?

React でコンポーネントを作成するにはどうすればよいですか?

押さえるべきポイント

  • 関数コンポーネントとクラスコンポーネントがある
  • フックの追加後(React 16.8 以降)、クラスコンポーネントではなく関数コンポーネントを使用することが推奨される。
  • 理由は前者のほうが記述量が少なく扱いやすく、React 16.8以前ではクラスコンポーネントでのみ利用可能なstate、ライフサイクルメソッド、その他の機能が関数コンポーネントでも使用できるようになったため。

7.When to use a Class Component over a Function Component?

関数コンポーネントではなくクラス コンポーネントを使用するのはどのような場合ですか?

押さえるべきポイント

  • Error Boundaryコンポーネントをサードパーティライブラリを使用せずに実装する場合以外を除いて、現状クラスコンポーネントを使用するユースケースはなし（エラーをキャッチするライフサイクルがクラスコンポーネントでしか使用できない）

33.What are the different phases of component lifecycle?

コンポーネントのライフサイクルにはどのような段階がありますか?

押さえるべきポイント

  • Mounting、Updating、Unmountingがあり、それぞれ以下の内容
    • Mounting:コンポーネントをブラウザ DOM にマウントする準備ができたフェーズ
    • Updating:主にsetStateによりstateが更新された際にコンポーネントが更新されるフェーズ
      • レンダリング
      • プリコミット
      • コミット
    • Unmounting:ブラウザDOMからコンポーネントがアンマウントされるフェーズ

54.What are error boundaries in React v16?

React v16 のエラー境界とは何ですか?

押さえるべきポイント

  • コンポーネントツリー内の任意の場所でJavaScriptエラーをキャッチし、代わりのフォールバック UIを表示するコンポーネントのこと
Error boundaries are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info) or static getDerivedStateFromError() :

67.How do you conditionally render components?

コンポーネントを条件付きでレンダリングするにはどうすればよいでしょうか?

押さえるべきポイント

  • falsyな値の場合、JSXはレンダリングされない
  • 論理演算、三項演算子を用いて特定の条件が true の場合にのみコンポーネントの特定の部分をレンダリングする等の処理が可能

In some cases you want to render different components depending on some state. JSX does not render false or undefined, so you can use conditional short-circuiting to render a given part of your component only if a certain condition is true.

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address && <p>{address}</p>}
  </div>
);
const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address ? <p>{address}</p> : <p>{"Address is not available"}</p>}
  </div>
);

81.What is a switching component?

スイッチングコンポーネントとは何ですか?

押さえるべきポイント

  • スイッチングコンポーネントは、多くのコンポーネントのうちの 1 つをレンダリングするコンポーネント
  • オブジェクトを使用してプロパティ値をコンポーネントにマップする
  • if文で条件分岐するよりもオブジェクトでマッピングしたほうがよりシンプルに記述できる

A switching component is a component that renders one of many components. We need to use object to map prop values to components.

For example, a switching component to display different pages based on page prop:

import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import ServicesPage from "./ServicesPage";
import ContactPage from "./ContactPage";

const PAGES = {
  home: HomePage,
  about: AboutPage,
  services: ServicesPage,
  contact: ContactPage,
};

const Page = (props) => {
  const Handler = PAGES[props.page] || ContactPage;

  return <Handler {...props} />;
};

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired,
};

87.Why should component names start with capital letter?

コンポーネント名を大文字で始める必要があるのはなぜですか?

押さえるべきポイント

  • JSX を使用してコンポーネントをレンダリングする場合、そのコンポーネントの名前は大文字で始める必要があるというライブラリ上の規約がある
  • React は認識できないタグとしてエラーをスローするようになっている

Stateについて

9.What is state in React?

React における状態とは何ですか?

押さえるべきポイント

  • stateはコンポーネントがマウントされている状態で使用できるリアクティブなオブジェクトのこと
  • stateが変更されるたびに、コンポーネントが再レンダリングされるということ
import React, { useState } from "react";

function User() {
  const [message, setMessage] = useState("Welcome to React world");

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

11.Why should we not update the state directly?

なぜ状態を直接更新してはいけないのでしょうか?

押さえるべきポイント

  • stateの更新には、setStateメソッドを使用すること
  • setState以外の方法、例えばstateに対して更新後のオブジェクトを直接代入する等をすると、コンポーネントは再レンダリングされない
  • setStateを使用すると、stateの更新が予約される。stateが変化すると、コンポーネントは再レンダリングによって更新後のstateとなる
  • 上記の特性により、setState実行直後（再レンダリング前）には、まだ更新前のstateの値となる点に注意
//Wrong
this.state.message = "Hello world";
//Correct
this.setState({ message: "Hello World" });

32.What is Lifting State Up in React?

React での状態のリフトアップとは何ですか?

押さえるべきポイント

  • 複数のコンポーネントが同じstateを共有する必要がある場合に、そのstateを最も近い共通の祖先まで引き上げること(それぞれの子コンポーネントでstateを保持するのではなく、stateを親に移動する)
  • 上記によりデータフローがシンプルになり可読性が向上する

82.Why we need to pass a function to setState()?

なぜ setState() に関数を渡す必要があるのでしょうか?

押さえるべきポイント

  • setStateの更新が次回レンダリング時に行われるという非同期の性質上、呼び出し時に現在のstateに依存すべきでない(setStateを使う場所やシチュエーションによって、意図した更新が行われないケースがある)
  • setState呼び出し時に、前の状態を引数とした関数を渡すことが推奨される

NG

const [counter, setCounter] = useState(0);

// このケースでは0に1を加えるという処理を2回行っているだけとなり、2つのsetState実行後のcountは1となる
const onClick = useCallback(() => {
  setCounter(count + 1);
  setCounter(count + 1);
  console.log(counter); // 1
}, [counter]);

OK

const [counter, setCounter] = useState(0);

  // prevから、更新前の以前のstateを確実に受け取ることができ、期待通りの処理が可能になる
  const onClick = useCallback(() => {
    setCounter((prev) => prev + 1);
    setCounter((prev) => prev + 1);
    console.log(counter); //2
  }, [counter]);

参照は同じ

const onClick = useCallback(() => {
    setCounter((prev) => {
      console.log(prev === counter); // true
      return prev;
    });
  }, [counter]);

108.What are the possible ways of updating objects in state?

状態のオブジェクトを更新するにはどのような方法がありますか?

押さえるべきポイント

  • 更新前のstateオブジェクトとは別の参照を持つオブジェクト(コピー)を引数に指定すること(同じ参照では、stateが変化したという検知がされない)
  • スプレッド構文やObject.assignでオブジェクトのコピーを作成し、新たなstateとしてセットする方法が一般的であるということ

123.What are the common folder structures for React?

React の一般的なフォルダー構造は何ですか?

押さえるべきポイント

以下の2パターンのディレクトリ構成があるということ

  • 機能またはルートによるグループ化
  • 類似ファイルの種類ごとにグループ化

306.Why do we use array destructuring (square brackets notation) in useState?

なぜ配列の分割 (角括弧表記) を使用するのでしょうかuseState?

const [counter, setCounter] = useState(0);

押さえるべきポイント

  • setStateの返り値は配列で、0番目にstateの値が、1番目にstateの更新関数が格納されているということ
  • stateの宣言時は配列の分割代入を使用すること

332.What is the difference between useState and useRef hook?

useState フックと useRef フックの違いは何ですか?

押さえるべきポイント

  • useState を使用すると、コンポーネント内に状態を持たせることができ、useRef を使用するとDOM 要素を参照できるという、それぞれの役割を理解すること
  • useState では、stateの更新後にコンポーネントが再レンダリングされるが、useRef では値またはstateが変化してもコンポーネントが再レンダリングされないということ

useState causes components to re-render after state updates whereas useRef doesn’t cause a component to re-render when the value or state changes. Essentially, useRef is like a “box” that can hold a mutable value in its (.current) property.
useState allows us to update the state inside components. While useRef allows referencing DOM elements.

Propsについて

10.What are props in React?

React のプロップとは何ですか?

押さえるべきポイント

  • propsを利用して、親から子にデータを受け渡しすることが可能
  • propsはオブジェクトなので、propsを受け取り使用する際は、分割代入を用いて簡潔に記述できること
import React from "react";
import ReactDOM from "react-dom";

// propsオブジェクトには、親から受け取ったname,ageが含まれている
const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </div>
  );
};

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent name="John" age="30" />
      <ChildComponent name="Mary" age="25" />
    </div>
  );
};
 //コンポーネントの引数で分割代入を利用し、ほしいプロパティのみを取得できる
  const ChildComponent = ({name, age}) => {
      return (
        <div>
          <p>{name}</p>
          <p>{age}</p>
        </div>
      );
    };

38.What is children prop?

childrenとは何ですか？

押さえるべきポイント

  • propsにはchildrenというプロパティが含まれており、childrenはその親コンポーネントがラップしている子要素が入っているということ
const MyDiv = React.createClass({
  render: function () {
    // props.childrenに、2つのspanタグが含まれている

    return <div>{this.props.children}</div>;
  },
});

ReactDOM.render(
  <MyDiv>
    <span>{"Hello"}</span>
    <span>{"World"}</span>
  </MyDiv>,
  node
);

68.Why we need to be careful when spreading props on DOM elements?

DOM 要素に props を展開するときに注意が必要なのはなぜですか?

押さえるべきポイント

  • propsには、アプリケーション上で意図的に指定したものとは別に、classNameなどの元々存在するものがあるということ
  • 上記により、レスト構文を使用して明示的にプロップスを指定するやり方が安全であるということ
const ComponentA = () => (
  <ComponentB isDisplay={true} className={"componentStyle"} />
);

const ComponentB = ({ isDisplay, ...domProps }) => (
  <div {...domProps}>{"ComponentB"}</div>
);

106.Why you can't update props in React?

React で props を更新できないのはなぜですか?

押さえるべきポイント

  • propsは不変(immutable)であるということ
  • 子は受けとったpropを変更できないということ

仮想DOMについて

25.How Virtual DOM works?

仮想 DOM はどのように機能するのでしょうか?

押さえるべきポイント

DOM更新のフロー

  1. データの変更を受け、その変更が仮想DOMに適用される
  2. 1の仮想DOMと変更前のDOMの差分を計算する
  3. 計算後、変更箇所のみがDOMに適用される

41.What is reconciliation?

和解(調整、調停)とは何ですか？

押さえるべきポイント

  • DOMを効率的・高速に更新するための仕組みのこと
  • 差分検出アルゴリズムにより、常に仮想DOMの更新部分のみをDOMに反映させることができ、更新処理が最適化される

Hookについて

226.What are hooks?

フックとは何ですか?

押さえるべきポイント

  • クラスコンポーネントを作成せずにstateやライフサイクルフックなどその他のReact機能を使用できるようにする特別なJavaScript関数のこと。
  • React 16.8 の新機能として導入されたということ
  • useState、useEffect、useCallback、useMemoなど種類がたくさんあり、それぞれ用途に応じて使い分ける必要があるということ
  • それぞれ、useというプレフィックスが付くこと

227.What rules need to be followed for hooks?

フックに関してはどのようなルールに従う必要がありますか?

押さえるべきポイント

  • フックがどんな場合においても同じ順序で呼び出されることを保証するために、コンポーネントのトップレベルで宣言する必要があるということ
    • for文や、ネストされた関数、if文の中で使用しないこと
  • 通常の JavaScript 関数からフックを呼び出さないこと
    • 関数コンポーネントまたはカスタムフックからのみ呼び出すこと
  • eslint -plugin-react-hooks というeslintプラグインを使用すると、上記2つのルールを強制することが可能であるということ
  • フックは、カスタムフックという形で、独自に作成することが可能であること

303.How to fetch data with React Hooks?

React Hooks を使用してデータをフェッチするにはどうすればよいですか?

押さえるべきポイント

  • useEffectでリクエストし、取得したデータをuseStateに保持するというのが一般的
  • useEffectの第二引数に空の配列を指定すると、初回レンダリング時のみ実行するという処理が可能になる

その他

196.What is React Dev Tools?

React 開発ツールとは何ですか?

押さえるべきポイント

  • ChromeおよびFirefoxで使用できるブラウザ拡張機能のこと
  • コンポーネントのプロパティや状態を含むコンポーネント階層を確認でき、デバッグがしやすくなる

257.What is NextJS and major features of it?

NextJS とその主な機能とは何ですか?

#53に関連

押さえるべきポイント

  • Reactのフレームワークであるということ
  • Reactで構築されたアプリケーションをサーバーサイドでレンダリングすることを容易にする
  • ページベースのシンプルなクライアントサイドルーティングを簡単に実現できる
  • 自動コード分割によるページ読み込みの高速化が可能になる