Объясните пожалуйста в чем разница: вызвать функцию внутри анонимной в onClick или просто передать функцию в onClick?

Question

[DanyaW]

Привел в конце кода два варианта привязки

const [count, setCount] = useState(0)
 const divOnClick = ( )=>{
    setCount(count+1) 
    console.log(count)
  }
<div onClick={ ( )=>divOnClick( ) }> Hi</div>
<div onClick={divOnClick}> Hi</div>

Comments

[Gary_Ihar]

в данном примере, во втором случае event клика можешь поймать в параметрах

[Lynn «Кофеман»]

Gary_Ihar, но поскольку функция стрелочная и объявлена без параметра, то не можешь

Так что разница только в лишней обёртке.

[Gary_Ihar]

Lynn «Кофеман», ну собсно если добавить параметр

Answer 1

[Hyojeong-Abzal]

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

типа: onChange={e => setTitle(e.currentTarget.value)}

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

именно в этом коде лучше передавать ссылку на функцию, так как так красиво пишется