-2

I'm beginner to React and It seems that there's convetion like creating separate folders and files for UI, NavBar, Landing page etc in React.

In which component do people usually store URL and API key information in React? I assume that It'd be the best to declare and store API using UseContext and wrap App.js file with ContextProvider, so that API can be accessed anywhere.

or is it better to save them in App.js file, so that It can be passed to children components?

or is it better to create a separate folder for API only?

Hans
  • 49
  • 1
  • 7

1 Answers1

0

There is no universal answer to your question. There are a lot of design patterns. The one i would recommend you to read about is 'Container Component Pattern'.

The Container Component pattern (or simply Component pattern) ensures to separate the data fetching logic, managing state from the presentational part. The presentational part has got a dumb name, dumb component. It is because the responsibility of the presentational part is just to render the information passed to it. The smart work of data fetching, working on it, and state management occurs in the container component.

DATA STORE --data fetched by API--> Data Fetching Container --data passed as props--> Presentation Component

In brief, you can create folder utils/hooks where you appropriately store fetch functions/hooks. Then you can create container component where you menage acquired data.

CptSosen
  • 160
  • 1
  • 13