Zenn
Open7

React Knowledge

SoraSora

Hooks

https://reactjs.org/docs/hooks-overview.html
なるほどね。下記やと count がcurrent stateで setCount is a function that lets you update it　か！
default値を設定するから、500円がデフォルトで設定する場面ならこんな感じかな〜

  const [prince, setPrice] = useState(500);

useState returns a pair: the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else.

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={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
SoraSora

But what is a Hook?

Got it. Hooks are func provided by React.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

SoraSora

✌️ Rules of Hooks

なるほどね。HooksはただのJS funcやけど、2つの独自追加ルールがあると。

  1. Hooksはtop levelでのみ使用可能
  2. Hooks は React function componentsでしか使うなと。普通のJSの関数では使えませんよと。

Hooks are JavaScript functions, but they impose two additional rules:
・Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
・Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)

SoraSora

Components

componentsってただのフロントで利用する「画面を司る関数」って感じやな。
同じ処理がある時にcomponents化して、関数作って再利用すると。
それをReactではHooksとかuseState?とか使って状態とかも関数で簡単に変えれるような仕組みがあるって感じかな〜

SoraSora

ふんふん、イメージ通りの説明。

Hooks are a way to reuse stateful logic, not state itself. In fact, each call to a Hook has a completely isolated state — so you can even use the same custom Hook twice in one component.

なるほどなるほど。useSomething はcustom Hooksと。

Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook. The useSomething naming convention is how our linter plugin is able to find bugs in the code using Hooks.