React props: Should I pass the object or its properties? Does it make much difference?

by

According to the principle of least privilege, this is a correct way:

<InnerComponent name={object.name} image={object.image} />

This restricts InnerComponent from accidentally modifying original object or accessing properties that aren’t intended for it.

Alternatively, properties could be picked from original object and passed as props:

<InnerComponent {...pick(object, 'name', 'image')} />

If there are numerous properties that are tedious to list, there may be single prop that accepts an object:

<InnerComponent object={pick(object, 'name', 'image')} />

More Related Contents:

  1. Correct modification of state arrays in React.js
  2. Why calling setState method doesn’t mutate the state immediately?
  3. React js onClick can’t pass value to method
  4. How to scroll to an element?
  5. Pass props in Link react-router
  6. Render HTML string as real HTML in a React component
  7. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
  8. Can I set state inside a useEffect hook
  9. How to overcome the CORS issue in ReactJS
  10. How to call an async function inside a UseEffect() in React?
  11. How does shallow compare work in react
  12. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  13. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  14. React hooks: accessing up-to-date state from within a callback
  15. React.js – Communicating between sibling components
  16. React “after render” code?
  17. React.js – Syntax error: this is a reserved word in render() function
  18. ‘react-scripts’ is not recognized as an internal or external command
  19. onClick works but onDoubleClick is ignored on React component
  20. Error “Error: A is only ever to be used as the child of element”
  21. How to use React.forwardRef in a class based component?
  22. Images not loading when relative path is used in React
  23. Can’t call setState on a component that is not yet mounted
  24. Redux Presentational Components Vs Container Component
  25. Converting Responsive Grid Layout to Plotly Dash
  26. React-Redux: Should all component states be kept in Redux Store
  27. React.js best practice regarding listening to window events from components
  28. React’s setState method with prevState argument
  29. How to render a Object in React?
  30. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined

Leave a Comment