👻

【MUI】UncontrolledとControlledの使い分け

に公開
React
mui
tech

MUIのUnControlledとControlledってなに？

まず、公式には下記のような記載があります
https://mui.com/material-ui/react-text-field/#uncontrolled-vs-controlled

A component is controlled when it's managed by its parent using props.
A component is uncontrolled when it's managed by its own local state.

上記を訳してみると、

  • Controlledなコンポーネントは、親コンポーネントによって管理されている
  • UnControlledなコンポーネントはローカルな状態で管理されている

になるのですが、よくわからなかったので、

  • Controlledなコンポーネントは、useStateなどで状態を管理したいときに使うコンポーネント
  • UnControlledなコンポーネントは状態管理しないときに使うコンポーネント

私は上記のように理解してしっくりきました

MUIのControlledコンポーネントの使い方

TextFieldを例にすると、下記のように使います

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function StateTextFields() {
  const [name, setName] = React.useState('Cat in the Hat');
  return (
    <Box
      component="form"
      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
      noValidate
      autoComplete="off"
    >
      <TextField
        id="outlined-controlled"
        label="Controlled"
        value={name}
        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
          setName(event.target.value);
        }}
      />
      <TextField
        id="outlined-uncontrolled"
        label="Uncontrolled"
        defaultValue="foo"
      />
    </Box>
  );
}

MUIのUnControlledコンポーネントの使い方

TextFieldを例にすると、下記のように使います

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function StateTextFields() {
  const [name, setName] = React.useState('Cat in the Hat');
  return (
    <Box
      component="form"
      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
      noValidate
      autoComplete="off"
    >
      <TextField
        id="outlined-uncontrolled"
        label="Uncontrolled"
        defaultValue="foo"
      />
    </Box>
  );
}
  • MUIのコンポーネントをUnControlledにしたときは、defaultValueという初期値を設定できます（なくても大丈夫）
  • onChangeでdefaultValueの値を変えようと思っても、変更できません（UnControlledなので）

MUIのUnControlledとControlled比較

value属性 defaultValue属性 状態管理
Controlled 必須 × 可能
UnControlled × 使える 不可能

基本的にはstateで管理したいコンポーネントはControlledという理解で問題ないと思います

Discussion