Define function in react hooks, function statement or const?

Question

When I have a react hook and inside of it I want to define a function in it, would I better use

useEffect(() => {
    //...
    function handler() {}
    //...
}, []);

or the newer const declaration

useEffect(() => {
    //...
    const handler = () => {}
    //...
}, []);

Are both exactly equivalent or are there differences in how Javascript handles these things?

If I define a const, it's only valid within the current scope, while defining a function would be valid elsewhere, is this true?

Does react need the functions accessible in different scopes or are they staying local in the current hook scope?

Renaldo Balaj · Accepted Answer · 2019-11-28T16:15:14.740

3

Since THIS is apart of the past by using React Hooks, you can use them both :) it's just syntax sugar es6.

If you want to go deeper on their differences you can use this article: https://www.freecodecamp.org/news/constant-confusion-why-i-still-use-javascript-function-statements-984ece0b72fd/ (there are plenty of more)

BUT IN REACT HOOKS THEY HAVE THE SAME SCOPE

edited Nov 28 '19 at 16:15

answered Nov 28 '19 at 16:05

Renaldo Balaj

2,390
11
23

1

There is a plenty of articles on this too see for a good explanation on the few differences and how to make a decision on which to use: https://www.freecodecamp.org/news/constant-confusion-why-i-still-use-javascript-function-statements-984ece0b72fd/ – Dan Mason Nov 28 '19 at 16:08
@Purgatory that covers Javascript but I wanted to know if React needs them accessible in different scopes – user6329530 Nov 28 '19 at 16:13
@Purgatory you right, I shouldn't have given an answer just for this newbie user :) EDITED – Renaldo Balaj Nov 28 '19 at 16:13
@Supertyp React **is** JavaScript. – Emile Bergeron Nov 28 '19 at 16:14
in react hooks they have the same scope – Renaldo Balaj Nov 28 '19 at 16:16
1

@EmileBergeron rly – user6329530 Nov 28 '19 at 16:17

score 2 · Answer 2 · answered Nov 28 '19 at 16:12

2

React hooks you can only use in pure components, means functions. So most of things you do there is just working as would you work with just some js function, no much difference really. In hooks themselves not all things possible, like one time I tried to make useEffect hook callback to be async function and get warning to run async function inside of it instead.

Inside pure component, that function, you not really need any this, so as Renaldo Balaj said, there is no difference wether use usual or arrow function.

answered Nov 28 '19 at 16:12

Ivan Cherviakov

528
2
12

my name on an answer :v --- instant upvote – Renaldo Balaj Nov 28 '19 at 16:44
Ha-ha, well thanks)) – Ivan Cherviakov Nov 28 '19 at 16:45

Define function in react hooks, function statement or const?

2 Answers2