React. Можно ли кто улучшить код?

Question

Здраствуйте! Хотел бы попросить вас помлщь с этим кодом.

import {
  useState
} from 'react';

import styles from './style/Component.module.css';
export function Dropdown() {
  const [isOpen, setIsOpen] = useState(false)
  
  function toggle() {
    setIsOpen(!isOpen)
  }
  
  return (
    <div>
      <button className{styles.main} onClick={toggle}>On</button>
      {
        isOpen && (
          <div className={styles.dropdown}>
            <ul>
              <li>1 list</li>
              <li>2 list</li>
            </ul>
          </div>
        )
      }
    </div>
  )
}

Нужно ли его улучшать и если да, то как? Посоветуйте.

Answer 1

Ваш код никак невозможно улучшить если учесть то что тут ничего лишнего и кода тоже мало. А, стоп. У вас ошибка в коде. Вот исправный код: <button className{styles.main} onClick={toggle}>On</button>. И еще <ul> {list.map((v,i) => (<li key={i}>{v} list</li>)} </ul>

Answer 2

Я бы изменил название функции-обработчика. Например, handleToggle. Так сразу понятно, что это обработчик события.
Еще, для функций-обработчиков стараюсь применять стрелочные функции. В классовых компонентах это поможет избежать проблем с потерей контекста this.
Вот так лучше не изменять состояние setIsOpen(!isOpen). Могут быть ситуации устаревания переданного в обработчик состояния isOpen. А еще, тут у тебя следующее состояние явно зависит от предыдущего. Перепиши вот так setIsOpen((currentState) => !currentState). Так ты даешь React-у инструкцию "Взять текущее состояние и инвертировать его"

БЛОГ НА HUSL

React. Можно ли кто улучшить код?

Ответы (2 шт):