CODEWITHSUNDEEP
reactjsvue.js
jjoan
jjoan

Reputation: 393

Vue/React: Proper way to call functions to pass down data?

So I'm confused to the best way to pass down data when building React or Vue apps.

Method 1) I had my child components calling functions that made API calls to get/refresh data on the component.

Method 2) I just recently made the switch, wherever possible, in these child components to put these API calls in the parent and the child component calls functions that call that one in the parent, and passes the new data in as props.
Are any of these the preferred way of handling data? Method 2 felt a little cleaner to me and it's not possible in all places but it felt like the parent should be responsible, when possible, to refresh the data, but that also makes the child dependent on the parent so I'm not sure anymore.

METHOD 1

<template>

      <div>
          <div v-for="(prod,index) in this.products" :key=index><
              {{ prod.name }}
          </div>
      </div>
</template>

<script>
        data() {
            return {
                products: []    
            }
        },
        mounted() {
             this.getProducts();
        },  
        methods: {
            getProducts: function() {
                axios.post('api/########', { 
                        this.products: response.data, 
                })

        }
</script>

METHOD 2

<template>
      <div>
          <div v-for="(prod,index) in products" :key=index><
              {{ prod.name }}
          </div>
      </div>
</template>

<script>
        props: {
            products: {type: Array}
        }  
        methods: {
            getProducts: function() {
                this.$parent.handleGetProducts()
               *** PARENT WOULD HAVE FUNCTION HANDLEGETPRODUCTS TO MAKE THE API CALL AND PASS DOWN AND REFRESH THE PROPS GOING INTO THIS COMPONENTU**
        }
</script>

Upvotes: 1

Views: 955

Answers (2)

Harshal Patil
Harshal Patil

Reputation: 21030

When it comes to unidirectional data architecture on which both Vue.js and React are based, the following guidelines should be considered:

  • A child should never directly access parent component data or functions.
  • It is the responsibility of parent component to pass data as props to its children
  • Generally, things like API call (or side effects) should be put into higher-order components i.e. parents.
  • In some cases, if a child component needs to tell a parent to refresh the data, then it should be done via events in Vue.js and callbacks in React. Do not really access the parent component method unless the parent has passed it as a callback prop.
  • When a data needs to be shared by multiple components across different views, then consider using State containers like Vuex, Redux or MobX. Again keep in mind that state containers should be accessed by higher-order components and keep state access to minimal in case of leaf or lower-order child components.
  • Alternately, Vue.js provides plugins and provide-inject mechanism for sharing data across component tree starting from designated children. In React world, Context API is the equivalent. Again, this sort of creates a strong coupling and should be used less frequently.

So what you are doing with method 2 is the long term solution keeping above guidelines in mind.

Upvotes: 5

Robin
Robin

Reputation: 5427

You can pass data in two ways in React.

  1. Using props - When you pass data parent to child
  2. Using callback and states - When you pass data child to parent

For details you can check this article in medium Passing Data Between React Components

Upvotes: 0

Related Questions