Skip to main content

Is it better practice to pass only the values you need from the base into child components or is it okay (performance-wise) to pass down the whole record object?



For example:



function ParentComponent({record}){


const status = record.getCellValue("Status")


const date  = record.getCellValue("Date")


const otherField  = record.getCellValue("Other field")





return (


  <ChildComponent status = {status} date = {date}  otherField={otherField} />


)


}


vs.



function ParentComponent({record}){





  return (


    <ChildComponent record = {record} />


  )


}


I’ve been doing the former but its gotten kind of disorganized when I’m using a lot of fields from a record.



Does the record object actually contain all the data in its fields or just the method to retrieve them from airtable?



Thanks!

The record only contains a model for querying the record. The only data it carries with it is the record ID for the record, along with the meta-data and methods required to query its data. So I think you are probably better off passing the whole record down the line, in terms of the convenience/performance trade-off. I don’t think the performance hit is that significant.

If you can get the cell value using getCellValue on the record object, then the record object contains the field value. This is the same in both scripting and custom apps. (It is a common misconception that the record does not contain the record data because the field data is not accessible using dot syntax, but the data is still in the record object.)



If you find that you need an ever increasing number of field values, you are better off passing the record. Use whichever method makes your code easier to understand.



There isn’t much of a performance implication because the objects are passed by reference, not by value.

Reply


Terms & Conditions