Как передать значение из одной ф-ции в другую в функциональном компоненте?

Question

[Александр]

Нужно удалить строку из таблицы, но перед удалением показать модалку с предупреждением. Как самой модалке можно узнать айдишник удаляемой строки таблицы?

const Component = ({ rows }) => {
      const [modalIsVisible, setModal] = false;

      const deleteRow = () => {
        // how to get id of row to delete here?
      }

      return (
        <div>
          <table>
            {rows.map(row => (
              <tr>
                <td>
                  <div>row of id {row.id}</div>
                  <button onClick={() => setModal(true)}>Delete row</button>
                </td>
              </tr>
            )}
          </table>
          <Modal isVisible={modalIsVisible}>
            <button onClick={deleteRow}>Delete anyway</button>
            <button onClick={() => setModal(false)}>Close</button>
          </Modal>
        </div>
      )
    }

Думал конечно отдельную переменную состояния создать с помощью useState, но мне этот подход не нравится, т.к. айдишник удаляемой строки это сугубо системная информация, никак не влияющая на отображение и не должна вызывать ререндер.

Answer 1

[0xD34F]

айдишник удаляемой строки это сугубо системная информация, никак не влияющая на отображение

Почему же, запросто может влиять:

const [ delId, setDelId ] = useState(null);

<button onClick={() => setDelId(row.id)}>Delete

<Modal isVisible={!!delId}>

<button onClick={() => setDelId(null)}>Close

Ну а вообще, useRef вам в помощь:

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

Comments

[strelok011]

и useCallback. И не вызывать стрелочные функции в онкликах

[Александр]

strelok011, useCallback нужен только если нужна регулярная ссылка не ф-цию, иначе это минус оптимизации https://kentcdodds.com/blog/usememo-and-usecallback

а со стрелочными ф-циями что не так?

[strelok011]

стрелочные функции вызывать внутри онклик - плохая привычка. У вас будет на каждый онклик создаваться новый экземпляр функции.

[Yustas Alexu]

strelok011, экономия на спичках. На практике ни на что не влияет. У нас на проекте несколько сотен тысяч строк кода на реакт, все в стрелочных функциях без useCallback. Если где-то проседает производительность, то только из-за бэкенда.

[Yustas Alexu]

strelok011, если на каждый обработчик создавать useCallback весь код будет в них и это создает визуальный мусор. Код должен быть лаконичным и читабельным.

[strelok011]

Yustas Alexu, вот тут вы не правы. Это называется ошибка выжившего.
То что в ваших проектах "на практике" ни на что не влияет - просто частный случай. И упирать на это, рассказывая, что "не пригодилось" - на ресурсе где люди спрашивают как правильно - не гут.
По стрелочным функциям - я вовсе не топлю за useCallback. Я только против их вызова внутри события onClick.
useCallback, мемоизация - не есть самоцель, иногда они просто вредны, иногда бесполезны, тут вступает в дело как раз ваш случай - решение по месту.
А просто отвергать - вы тогда собеседование не пройдете в какую-нибудь серьезную контору, где попросят написать на хуках банальную авторизацию с просьбой убрать лишние ререндеры :)

[Yustas Alexu]

strelok011, в случае с функциональными компонентами (а мы только их и используем в проекте) каждый перерендер это вызов функции-компонента и там уже не так важно создаете вы колбэк через стрелку или делаете ссылку на функцию объявленную в этом же компоненте. Вот если компонент классовый тогда да, разница будет. Или если колбэк прокидывается из другого компонента, но вы ведь не этот случай имели в виду верно?

[strelok011]

Yustas Alexu нет, не этот. Но даже в функциональном компоненте посложнее - можно нарваться ¯\_(ツ)_/¯.