What exactly is a dependency in react.js?

Question

I am studying React.js., and I have started by setting the project folders to try some codes. But, some terms are confusing me as a beginner. One of them is "dependency." When I search for it, the result is only related to dependency injection stuff, but what is the "dependency" itself?

Answer 1

A dependency is some third-party code that your application depends on. Just like a child depends on its parent, your application depends on other people's code. A piece of code becomes a true dependency when your own application cannot function without it.

If you want to look at the dependencies you're using, you can find them in the package-lock.json file under the packages -> dependencies key.

Answer 2

Well, dependencies are those things that you need to install and import for doing specific things, for example, if you want to add routing(moving from one page to another which changes your URL) in your react project then you need to install react-router-dom dependency by doing

npm install react-router-dom

Answer 3

A dependency is just a package that your project uses.

Very few javascript projects are entirely self-contained. When your project needs code from other projects in order to do its thing, those other projects are "dependencies"; your project depends on them to run.

When you install third-party packages via npm install <package>, you're adding a dependency.

Your project's package.json file includes a list of your project's dependencies.

Answer 4

Dependencies comes into picture when you are playing with the API's, or the Data Server for request and response.

for e.g. you are creating a weather web-app using weather API, and for some reason the server in which the weather API is hosted is down. Then you request for data from API will be rejected. i.e. your web-app can't work without that API, therefore it's a dependency for your web-app.

Answer 5

Let's take an example, when developping a react application, a common use case is to make http request to fetch data from a backend server.

You can use axios which is well known http client used for javascript app.

You need to add a dependency to your project pointing to this library.

 ______________               _____________ 
|              |             |             |
| Your Project | ----------> |    Axios    |
|______________|             |_____________|

To add a dependency with npm, use the command npm install :

npm install axios --save

The dependency will be installed into the node_modules folder. You can also see the dependency name in your package.json

You can now use the dependency in your code :

import axios from 'axios';

axios.get('/my-service').then(...);

Project dependencies are listed in the package.json :

{
  //  Packages required by your application in production.
  "dependency": {
    ...
  },
  //  Packages that are only needed for local development and testing.
  "devDependency": {
    ...
  }
}

Answer 6

In modern React, is quite common to talk about dependencies when talking about hooks.

Take the useEffect hook as example:

  useEffect(() => {
    async function fetchCurrentPokemonData() {
      fetch(`https://pokeapi.co/api/v2/pokemon/${currentPokemonId}`)
    }
    fetchCurrentPokemonData()
  }, [currentPokemonId]) // <-- THIS IS THE DEPENDENCIES ARRAY

When the component that calls this hook is first added to the DOM, the hook will be executed. From that point on, every time the component is re-rendered, React will take a look at the dependencies array and check if it has changed. If so, it will execute the code inside the useEffect hook again.

Reference: https://react.dev/reference/react/useEffect#useeffect