props ↔ frozen Object of properties; passed as dynamic input from Parent Component to children

aka prop

props are immutable within Component via Object.freeze()

props should be mutated in Parent Component instead

called as this.props in CC

resemble HTML Attribute

this.props

frozen object for accessing properties inside a Component

props is a single object used to hold variable number of optional arguments with no need for exact order

children

special placeholder props to nest JSX

References

1. FC ↔ function to return UI via JSX. Pass propsfor dynamic input. add state via Hook

2. Prop Drilling ↔ to pass props through deep Component Hierarchy 🍜👨‍💻

3. children ↔ special placeholder props to nest JSX

4. Pure Component ↔ stateless Component that always renders same based on same props input.

5. Render Props ↔ Providing function as props to render JSX

6. useMemo() ↔ Memoizing Hook to Memoize entire Component, some JSX or props, based on Deps Array change

7. React DevTools ↔ Browser Extension to inspect React App (dev build only!) to view Component Hierarchy, props & state

8. fallback ↔ prop to set JSX placeholder for Suspense Boundary when Lazy Loading

9. element ↔ <Route\> prop to attach JSX

10. state ↔ prop to pass info onto child route to config redirect logic, access via location.state

11. state ↔ prop to pass config & redirect logic, to access from Child via location.state

12. value ↔ Provider prop to share Context data to all Subscribers

13. usePrevious() ↔ Custom Hook to get previous value of props or state

14. unoptimized ↔ prop to set <Image\> to serve unoptimized Image Element (for compat with storybook)

15. key ↔ special prop as string UID for VDOM to track/Diff list elements