remove forwarded refs

Author: bradwestfall

react/advanced-compound-components/01-api-design/lecture/Disclosure.final.jsx

@@ -3,7 +3,7 @@ import React, { useState, useId } from 'react'
 export function Disclosure({ children, onChange, defaultOpen = false, ...props }) {
   const [isOpen, setIsOpen] = useState(defaultOpen)
   const id = useId()
-  const panelId = `panel-${id}`
+  const panelId = `${id}-panel`
 
   children = React.Children.map(children, (child) => {
     return React.cloneElement(child, {
@@ -23,42 +23,32 @@ export function Disclosure({ children, onChange, defaultOpen = false, ...props }
   )
 }
 
-export const DisclosureButton = React.forwardRef(
-  ({ children, isOpen, panelId, onSelect, ...props }, forwardedRef) => {
-    // Note, data attributes in React need to have an empty string in order to be created correctly.
-    return (
-      <button
-        {...props}
-        onClick={onSelect}
-        data-disclosure-button=""
-        data-state={isOpen ? 'open' : 'collapsed'}
-        aria-expanded={isOpen}
-        aria-controls={panelId}
-        ref={forwardedRef}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-
-DisclosureButton.displayName = 'DisclosureButton'
-
-export const DisclosurePanel = React.forwardRef(
-  ({ children, isOpen, panelId, ...props }, forwardedRef) => {
-    return (
-      <div
-        {...props}
-        id={panelId}
-        hidden={!isOpen}
-        data-disclosure-panel=""
-        data-state={isOpen ? 'open' : 'collapsed'}
-        ref={forwardedRef}
-      >
-        {children}
-      </div>
-    )
-  }
-)
+export const DisclosureButton = ({ children, isOpen, panelId, onSelect, ...props }) => {
+  // Note, data attributes in React need to have an empty string in order to be created correctly.
+  return (
+    <button
+      {...props}
+      onClick={onSelect}
+      data-disclosure-button=""
+      data-state={isOpen ? 'open' : 'collapsed'}
+      aria-expanded={isOpen}
+      aria-controls={panelId}
+    >
+      {children}
+    </button>
+  )
+}
 
-DisclosurePanel.displayName = 'DisclosurePanel'
+export const DisclosurePanel = ({ children, isOpen, panelId, ...props }) => {
+  return (
+    <div
+      {...props}
+      id={panelId}
+      hidden={!isOpen}
+      data-disclosure-panel=""
+      data-state={isOpen ? 'open' : 'collapsed'}
+    >
+      {children}
+    </div>
+  )
+}

react/advanced-compound-components/01-api-design/lecture/index.jsx

@@ -24,9 +24,6 @@ function App() {
 ❌ Be able to pass the underlying button own props (like className, id, etc)
    unless we do strange API things like `buttonProps={}`
 ❌ Convert class-names to data-attributes
-❌ Be able to forward refs to the panel or button.
-❌ Error reporting now refers to the forwarded ref.
-   - Add a displayName to make it easier to debug.
 ❌ Add ARIA
    - aria-expanded on button
    - aria-controls on button

react/advanced-compound-components/02-context-and-events/lecture/Accordion.final.jsx

@@ -7,85 +7,74 @@ const AccordionContext = createContext()
  * Accordion
  */
 
-export const Accordion = React.forwardRef(
-  ({ children, onChange, defaultIndex = 0, id, ...props }, forwardedRef) => {
-    const [selectedIndex, setSelectedIndex] = useState(defaultIndex)
-    const accordionId = useId(id)
-
-    // We're mapping over the children (AccordionItem) to get their index. Then we're
-    // creating a context for each one.
-    children = React.Children.map(children, (child, index) => {
-      const panelId = `accordion-${accordionId}-panel-${index}`
-      const buttonId = `accordion-${accordionId}-button-${index}`
-
-      const context = {
-        buttonId,
-        panelId,
-        selected: selectedIndex === index,
-        selectPanel: () => {
-          onChange && onChange(index)
-          setSelectedIndex(index)
-        },
-      }
-      return <AccordionContext value={context} children={child} />
-    })
-
-    function onKeyDown(event) {
-      event.preventDefault()
-      const i = selectedIndex
-
-      switch (event.key) {
-        case 'ArrowUp':
-          if (i !== 0) {
-            setSelectedIndex(i - 1)
-          }
-          break
-        case 'ArrowDown':
-          if (i < React.Children.count(children) - 1) {
-            setSelectedIndex(i + 1)
-          }
-          break
-        default:
-          break
-      }
+export const Accordion = ({ children, onChange, defaultIndex = 0, id, ...props }) => {
+  const [selectedIndex, setSelectedIndex] = useState(defaultIndex)
+  const accordionId = useId(id)
+
+  // We're mapping over the children (AccordionItem) to get their index. Then we're
+  // creating a context for each one.
+  children = React.Children.map(children, (child, index) => {
+    const panelId = `accordion-${accordionId}-panel-${index}`
+    const buttonId = `accordion-${accordionId}-button-${index}`
+
+    const context = {
+      buttonId,
+      panelId,
+      selected: selectedIndex === index,
+      selectPanel: () => {
+        onChange && onChange(index)
+        setSelectedIndex(index)
+      },
+    }
+    return <AccordionContext value={context} children={child} />
+  })
+
+  function onKeyDown(event) {
+    event.preventDefault()
+    const i = selectedIndex
+
+    switch (event.key) {
+      case 'ArrowUp':
+        if (i !== 0) {
+          setSelectedIndex(i - 1)
+        }
+        break
+      case 'ArrowDown':
+        if (i < React.Children.count(children) - 1) {
+          setSelectedIndex(i + 1)
+        }
+        break
+      default:
+        break
     }
-
-    return (
-      <div data-accordion="" onKeyDown={onKeyDown} ref={forwardedRef} {...props}>
-        {children}
-      </div>
-    )
   }
-)
 
-Accordion.displayName = 'Accordion'
+  return (
+    <div data-accordion="" onKeyDown={onKeyDown} {...props}>
+      {children}
+    </div>
+  )
+}
 
 /**
  * Accordion Item
  */
 
-export const AccordionItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
+export const AccordionItem = ({ children, ...props }) => {
   const { selected } = use(AccordionContext)
 
   return (
-    <div
-      {...props}
-      data-accordion-item=""
-      data-state={selected ? 'open' : 'collapsed'}
-      ref={forwardedRef}
-    >
+    <div {...props} data-accordion-item="" data-state={selected ? 'open' : 'collapsed'}>
       {children}
     </div>
   )
-})
-
-AccordionItem.displayName = 'AccordionItem'
+}
 
 /**
  * Accordion Button
  */
 
-export const AccordionButton = React.forwardRef(({ children, onClick, ...props }, forwardedRef) => {
+export const AccordionButton = ({ children, onClick, ...props }) => {
   const { buttonId, panelId, selected, selectPanel } = use(AccordionContext)
 
   return (
@@ -97,20 +86,17 @@ export const AccordionButton = React.forwardRef(({ children, onClick, ...props }
       aria-expanded={selected}
       id={buttonId}
       aria-controls={panelId}
-      ref={forwardedRef}
     >
       {children}
     </button>
   )
-})
-
-AccordionButton.displayName = 'AccordionButton'
+}
 
 /**
  * Accordion Panel
  */
 
-export const AccordionPanel = React.forwardRef(({ children, ...props }, forwardedRef) => {
+export const AccordionPanel = ({ children, ...props }) => {
   const { buttonId, panelId, selected } = use(AccordionContext)
 
   return (
@@ -122,11 +108,8 @@ export const AccordionPanel = React.forwardRef(({ children, ...props }, forwarde
       hidden={!selected}
       data-accordion-panel=""
       data-state={selected ? 'open' : 'collapsed'}
-      ref={forwardedRef}
     >
       {children}
     </div>
   )
-})
-
-AccordionPanel.displayName = 'AccordionPanel'
+}