React Knowledge

なるほどね。下記やと count がcurrent stateで setCount is a function that lets you update it か!
  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 (
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me

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.

✌️ 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.)




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.