Declaring functions and variables in React

Question

I'm building a large React application that involves processing lots of data, formatting it and outputting to tables. Occasionally these functions are variables (e.g const x = () => etc.)

I'm storing the functions that do this formatting in Typescript files which I import into my React components.

To give an example, I might write a table formatting function like this:

export const buildMainData = (data: any) => {
  do stuff
}

I'm placing it inside a file, called functions.ts (for example).

I then have a React component which makes use of the function.

My question is - is this a bad idea? Am I creating loads of functions that are polluting the memory heap? I'm using create-react-app so I'm not sure if Webpack is doing some magic behind the scenes to prevent global variables, or whether everything I write should be placed inside of React components.

It would be great if anyone with more experience / knowledge in this area could help out. If I'm also completely getting the wrong end of the stick that would also be helpful to know. Thanks.

T.J. Crowder · Accepted Answer · 2020-06-16 13:14:49Z

1

The variables and functions you're exporting aren't globals, they're exports from the module in which you define them. They're used via import. If you have some that aren't used, modern bundlers like Webpack and Rollup can tree-shake the bundle they create, leaving unused functions out (if there are any). More about tree-shaking in Webpack and in Rollup.js.

It's true that top-level declarations in classic scripts are globals, but top-level declarations in modules are scoped to the module (kind of like the module were a function and you were declaring things inside it), and then possibly exported from it.

edited Jun 16, 2020 at 13:14

answered Jun 16, 2020 at 13:13

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Declaring functions and variables in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related