React 18 Enhancements: Refactor defaultProps to default function parameters

[tay1orjones]

React 18.3 will introduce a deprecation of defaultProps. Components will need to move off defaultProps and instead use default function parameters.

Additionally, we'll need to ensure that default values are static #10777 - this mostly includes function props

We probably should wait to tackle this until React 18.3 lands to see if the react team has additional recommendations for this work and/or a codemod available to automate this refactor.

// TODO: provide code example

Components to refactor

Preview Give feedback

1. Use default function parameters in .../icon-build-helpers/src/builders/react/components/Icon.js
2. Use default function parameters in .../react/examples/custom-data-table-state-manager/src/components/CustomDataTablejs:
3. Use default function parameters in Accordion/Accordion.Skeleton.js
4. Use default function parameters in Checkbox/Checkbox.tsx
5. Use default function parameters in CodeSnippet/CodeSnippet.js
6. Use default function parameters in ComboBox/ComboBox.tsx
7. Use default function parameters in ComposedModal/ComposedModal.js
8. Use default function parameters in ComposedModal/ModalFooter.js
9. Use default function parameters in ComposedModal/ModalHeader.js
10. Use default function parameters in ContentSwitcher/ContentSwitcher.js
11. Use default function parameters in Copy/Copy.js
12. Use default function parameters in CopyButton/CopyButton.js
13. Use default function parameters in DataTable/DataTable.js
14. Use default function parameters in DataTable/Table.js
15. Use default function parameters in DataTable/TableBatchAction.js
16. Use default function parameters in DataTable/TableBatchActions.js
17. Use default function parameters in DataTable/TableBody.js
18. Use default function parameters in DataTable/TableHeader.js
19. Use default function parameters in DataTable/TableSelectAll.tsx
20. Use default function parameters in DataTable/TableToolbar.tsx
21. Use default function parameters in DataTable/TableToolbarMenu.tsx
22. Use default function parameters in DataTable/TableToolbarSearch.js
23. Use default function parameters in DataTableSkeleton/DataTableSkeleton.tsx
24. Use default function parameters in Dropdown/Dropdown.tsx
25. Use default function parameters in FileUploader/Filename.js
26. Use default function parameters in FileUploader/FileUploader.js
27. Use default function parameters in FileUploader/FileUploaderDropContainer.js
28. Use default function parameters in FileUploader/FileUploaderItem.js
29. Use default function parameters in FluidSearch/FluidSearch.js
30. Use default function parameters in FormGroup/FormGroup.js
31. Use default function parameters in ListBox/ListBox.tsx
32. Use default function parameters in ListBox/ListBoxMenuIcon.tsx
33. Use default function parameters in ListBox/ListBoxMenuItem.tsx
34. Use default function parameters in ListBox/ListBoxSelection.tsx
35. Use default function parameters in ListBox/next/ListBoxSelection.js
36. Use default function parameters in ListBox/next/ListBoxTrigger.js
37. Use default function parameters in Modal/Modal.js
38. Use default function parameters in ModalWrapper/ModalWrapper.js
39. Use default function parameters in MultiSelect/FilterableMultiSelect.js
40. Use default function parameters in MultiSelect/MultiSelect.tsx
41. Use default function parameters in Notification/Notification.js
42. Use default function parameters in OrderedList/OrderedList.js
43. Use default function parameters in OverflowMenu/OverflowMenu.js
44. Use default function parameters in Pagination/experimental/PageSelector.js
45. Use default function parameters in Pagination/experimental/Pagination.js
46. Use default function parameters in ProgressIndicator/ProgressIndicator.js
47. Use default function parameters in RadioTile/RadioTile.js
48. Use default function parameters in Search/Search.Skeleton.js
49. Use default function parameters in Select/Select.tsx
50. Use default function parameters in SelectItem/SelectItem.tsx
51. Use default function parameters in SelectItemGroup/SelectItemGroup.tsx
52. Use default function parameters in SkeletonText/SkeletonText.js
53. Use default function parameters in Slider/Slider.tsx
54. Use default function parameters in StructuredList/StructuredList.js
55. Use default function parameters in StructuredList/StructuredList.Skeleton.js
56. Use default function parameters in Switch/Switch.js
57. Use default function parameters in Tab/Tab.js
58. Use default function parameters in TabContent/TabContent.js
59. Use default function parameters in TextArea/TextArea.tsx
60. Use default function parameters in TextInput/ControlledPasswordInput.js
61. Use default function parameters in Tile/Tile.js
62. Use default function parameters in TileGroup/TileGroup.js
63. Use default function parameters in Toggle/Toggle.Skeleton.js
64. Use default function parameters in ToggleSmall/ToggleSmall.Skeleton.js
65. Use default function parameters in UIShell/Content.js
66. Use default function parameters in UIShell/HeaderContainer.js
67. Use default function parameters in UIShell/HeaderName.js
68. Use default function parameters in UIShell/HeaderSideNavItems.js
69. Use default function parameters in UIShell/Link.js
70. Use default function parameters in UIShell/SideNav.js
71. Use default function parameters in UIShell/SideNavFooter.js
72. Use default function parameters in UIShell/SideNavIcon.js
73. Use default function parameters in UIShell/SkipToContent.js
74. Use default function parameters in UnorderedList/UnorderedList.js
75. Refactor defaultProps to default function parameters in .../react/src/internal/FloatingMenu.js
76. Refactor defaultProps to default function parameters in .../react/src/internal/Selection.js

[tuccitj]

Current getting this error on UIShell.Content.js. If someone can share a sample of the refactor, I can start banging the rest out.

[tw15egan]

@tuccitj that would be great if you want to start working on this. One example of a component that has been converted is IconSwitch. These lines specifically. For example, in UIShell/Content you'd remove

Content.defaultProps = {
  tagName: 'main',
};

and instead, make it a default function parameter

const Content = ({
  className: customClassName,
  children,
  tagName = 'main',
  ...rest
}) => {

For functions, you';d do something like this:

const noopFn = () => {};

const Content = ({
    onClick = noopFn,
     ...
}) => {

[kubijo]

Is there any plan to backport this to pre-11 release? We have to stay back because still lacking typescript support...