Why are we doing this?
According to the React team, switching a component from a class component to a functional component is technically a breaking change. This is because class components accept a ref that points to the class instance by default. There is no way to opt-out of this behavior. As a result, if we switched a component to a functional component it would no longer have a ref, and existing code that uses a ref would break. Similarly, using React.forwardRef would produce a component where the ref would no longer point to a class instance and code could similarly break.
We have moved some components over to the new format despite these situations. The rationale at the time was that we weren't intending people to use these parts of a component (specifically class instance methods) and if teams were trying to use the ref to find a node in the document their code would work if we used React.forwardRef.
With v11, it seemed like a great opportunity to convert our remaining class components to the new functional component style with hooks.
Effort size legend
❇️ - sm
✴️ - md
🆘 - lg
Tasks
We would like to convert the following components to functional components that use hooks where appropriate:
Why are we doing this?
According to the React team, switching a component from a class component to a functional component is technically a breaking change. This is because class components accept a
refthat points to the class instance by default. There is no way to opt-out of this behavior. As a result, if we switched a component to a functional component it would no longer have aref, and existing code that uses arefwould break. Similarly, usingReact.forwardRefwould produce a component where therefwould no longer point to a class instance and code could similarly break.We have moved some components over to the new format despite these situations. The rationale at the time was that we weren't intending people to use these parts of a component (specifically class instance methods) and if teams were trying to use the
refto find a node in the document their code would work if we usedReact.forwardRef.With v11, it seemed like a great opportunity to convert our remaining class components to the new functional component style with hooks.
Effort size legend
❇️ - sm
✴️ - md
🆘 - lg
Tasks
We would like to convert the following components to functional components that use hooks where appropriate:
src/components/ToggleSmall/ToggleSmall.Skeleton.js(this component is deprecated)ToggleSmallSkeletonsrc/components/Toggle/Toggle.Skeleton.js(this component is deprecated)ToggleSkeletonsrc/components/Tooltip/Tooltip.jsTooltip(component is being replaced in another update)src/internal/FloatingMenu.jsFloatingMenu(component will be replaced by popover)src/components/ToolbarSearch/ToolbarSearch.jsToolbarSearchsrc/components/Toggle/Toggle.jsToggle(already covered in Toggle/next)src/components/SearchLayoutButton/SearchLayoutButton.jsSearchLayoutButton(component has been deprecated)src/internal/Selection.jsSelection(will be unnecessary after moving listbox components touseSelection)src/components/ModalWrapper/ModalWrapper.jsModalWrapper(component is deprecated)src/components/ErrorBoundary/ErrorBoundary.jsErrorBoundary(has no hooks equivalent)src/components/DataTable/DataTable.jsDataTable(too big to migrate, may use hook format in the future)src/components/ContentSwitcher/ContentSwitcher.jsContentSwitcher(currently being updated separately)