0

I've included the image below so you can understand what I'm talking about.

For a React component I am able to create a class and have functions that display the content that is returned from those functions. I see three sections of a component that I can place a functions(see red boxes in image). I'm confused as to if it matters where an actual function is placed. All three of these functions do the same thing and yet are in different places.
Can someone please tell me if it matters or if it just preference of the developer. Thank you. C

Image below.

enter image description here

cory
  • 11
  • 1

1 Answers1

0

Outside of Component:

There is proper for functions that don't need to this keyword of component and only get arguments and execute some code and return something (if you want). If you don't need to access to this, it is the most convenient place to write functions.

Inside Component:

There is proper for functions that need to this keyword. for example if you need to access component states (this.state, this.setState(),...) and props (this.props,...), Here is the proper place.

Inside render() method of Component:

According to this ,Functions in the render method will be created each render which is a slight performance hit. It's also messy if you put them in the render, which is a much bigger reason, you shouldn't have to scroll through code in render to see the html output. It is proper to put them on the class instead.

Ashkan
  • 272
  • 2
  • 11