React · Theory

const in React

Theory

73/94

const in React

const means the binding doesn’t get reassigned. Components are usually const Box = () => …. useState’s setter is const setN = … — you call setN(1), you don’t do setN = otherFn. const does not make the value on screen frozen; state still updates via the setter.

let is fine for loop indexes outside JSX. Prefer const by default. Don’t confuse const with React.memo or Object.freeze.

const in React — box and setN are const. Click still works — we call setN, we don’t do setN = something else.

Exam tip

const component + setter still updates UI.

Example

// const
import { useState } from "react";

const Box = () => {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
};

export default Box;

const in React — box and setN are const. Click still works — we call setN, we don’t do setN = something else.

Short notes

const : no rebinding.
setState : call, don’t reassign.
Trap‘const means UI can’t change’.

React · Theory

const in React

← All stacks

Theory

73/94

const in React

let is fine for loop indexes outside JSX. Prefer const by default. Don’t confuse const with React.memo or Object.freeze.

const in React — box and setN are const. Click still works — we call setN, we don’t do setN = something else.

Exam tip

const component + setter still updates UI.

Example

// const
import { useState } from "react";

const Box = () => {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
};

export default Box;

const in React — box and setN are const. Click still works — we call setN, we don’t do setN = something else.

Short notes

const : no rebinding.
setState : call, don’t reassign.
Trap‘const means UI can’t change’.

const in React

Example

Short notes

Questions

const in React

Example

Short notes

Questions