From 4b14dca9a3c3ae47b83cdbd5dc85f788aeda4842 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Mon, 24 Oct 2022 17:46:41 +1100
Subject: [PATCH 1/4] Refactor class components to functional components

---
 docs/ExampleWrapper.tsx                       | 140 +++++++----------
 packages/react-select/src/NonceProvider.tsx   |  29 ++--
 .../react-select/src/animated/transitions.tsx | 141 +++++++-----------
 3 files changed, 116 insertions(+), 194 deletions(-)

diff --git a/docs/ExampleWrapper.tsx b/docs/ExampleWrapper.tsx
index c290c5f973..b1e10b108c 100644
--- a/docs/ExampleWrapper.tsx
+++ b/docs/ExampleWrapper.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
 import { CSSObject } from '@emotion/serialize';
-import { Component } from 'react';
+import { ReactNode, useState } from 'react';
 import CodeSandboxer, { GitInfo } from 'react-codesandboxer';
 import { CodeBlock } from './markdown/renderer';
 import pkg from '../packages/react-select/package.json';
@@ -20,99 +20,69 @@ const gitInfo: GitInfo = {
 const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${gitInfo.branch}`;
 
 interface Props {
+  children?: ReactNode;
   readonly label: string;
   readonly raw: { readonly default: string };
   readonly urlPath: string;
   readonly isEditable?: boolean;
 }
 
-interface State {
-  readonly showCode: boolean;
-}
-
-export default class ExampleWrapper extends Component<Props, State> {
-  state: State = { showCode: false };
-  static defaultProps = { isEditable: true };
-
-  renderCodeSample = () => {
-    let { raw } = this.props;
-    let { showCode } = this.state;
-
-    if (!showCode || !raw) {
-      return null;
-    } else {
-      return <CodeBlock literal={raw.default} codeinfo={['jsx']} />;
-    }
-  };
-
-  renderSourceViewOption = () => {
-    let { raw } = this.props;
-    let { showCode } = this.state;
-
-    if (!raw) {
-      return (
-        <AAction
-          href={`${sourceUrl}/${this.props.urlPath}`}
-          target="_blank"
-          title="View Source"
-        >
-          <SourceIcon />
-        </AAction>
-      );
-    } else {
-      return (
-        <ButtonAction
-          onClick={() => this.setState({ showCode: !showCode })}
-          title="View Source"
-        >
-          <SourceIcon />
-        </ButtonAction>
-      );
-    }
-  };
-
-  renderCSBButton = () => {
-    let { isEditable, raw, urlPath } = this.props;
+export default ({
+  children,
+  label,
+  raw,
+  urlPath,
+  isEditable = true,
+}: Props) => {
+  const [showCode, setShowCode] = useState(false);
 
-    if (isEditable) {
-      return (
-        <CodeSandboxer
-          example={raw.default}
-          examplePath={urlPath}
-          pkgJSON={pkg}
-          gitInfo={gitInfo}
-          dependencies={{
-            [pkg.name]: pkg.version,
-          }}
-        >
-          {({ isLoading }) => (
-            <ButtonAction title="Edit in CodeSandbox">
-              {isLoading ? <Spinner /> : <NewWindowIcon />}
+  return (
+    <div>
+      <ExampleHeading>
+        <h4>{label}</h4>
+        <Actions>
+          {raw ? (
+            <ButtonAction
+              onClick={() => setShowCode((prev) => !prev)}
+              title="View Source"
+            >
+              <SourceIcon />
             </ButtonAction>
+          ) : (
+            <AAction
+              href={`${sourceUrl}/${urlPath}`}
+              target="_blank"
+              title="View Source"
+            >
+              <SourceIcon />
+            </AAction>
           )}
-        </CodeSandboxer>
-      );
-    } else {
-      return null;
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <ExampleHeading>
-          <h4>{this.props.label}</h4>
-          <Actions>
-            {this.renderSourceViewOption()}
-            {this.renderCSBButton()}
-          </Actions>
-        </ExampleHeading>
-        {this.renderCodeSample()}
-        {this.props.children}
-      </div>
-    );
-  }
-}
+          {isEditable ? (
+            <CodeSandboxer
+              example={raw.default}
+              examplePath={urlPath}
+              pkgJSON={pkg}
+              gitInfo={gitInfo}
+              dependencies={{
+                [pkg.name]: pkg.version,
+              }}
+            >
+              {({ isLoading }) => (
+                <ButtonAction title="Edit in CodeSandbox">
+                  {isLoading ? <Spinner /> : <NewWindowIcon />}
+                </ButtonAction>
+              )}
+            </CodeSandboxer>
+          ) : null}
+        </Actions>
+      </ExampleHeading>
+      {showCode && raw ? (
+        <CodeBlock literal={raw.default} codeinfo={['jsx']} />
+      ) : null}
+      {children}
+    </div>
+  );
+};
 
 const ExampleHeading = (props: any) => (
   <div
diff --git a/packages/react-select/src/NonceProvider.tsx b/packages/react-select/src/NonceProvider.tsx
index 1ba548aa88..5e91a85e49 100644
--- a/packages/react-select/src/NonceProvider.tsx
+++ b/packages/react-select/src/NonceProvider.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Component, ReactNode } from 'react';
+import { useMemo } from 'react';
+import { ReactNode } from 'react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
-import memoizeOne from 'memoize-one';
 
 interface NonceProviderProps {
   nonce: string;
@@ -10,21 +10,10 @@ interface NonceProviderProps {
   cacheKey: string;
 }
 
-export default class NonceProvider extends Component<NonceProviderProps> {
-  constructor(props: NonceProviderProps) {
-    super(props);
-    this.createEmotionCache = memoizeOne(this.createEmotionCache);
-  }
-  createEmotionCache = (nonce: string, key: string) => {
-    return createCache({ nonce, key });
-  };
-  render() {
-    const emotionCache = this.createEmotionCache(
-      this.props.nonce,
-      this.props.cacheKey
-    );
-    return (
-      <CacheProvider value={emotionCache}>{this.props.children}</CacheProvider>
-    );
-  }
-}
+export default ({ nonce, children, cacheKey }: NonceProviderProps) => {
+  const emotionCache = useMemo(
+    () => createCache({ key: cacheKey, nonce }),
+    [cacheKey, nonce]
+  );
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
+};
diff --git a/packages/react-select/src/animated/transitions.tsx b/packages/react-select/src/animated/transitions.tsx
index f1cd0bc5e9..30a4e592d4 100644
--- a/packages/react-select/src/animated/transitions.tsx
+++ b/packages/react-select/src/animated/transitions.tsx
@@ -1,12 +1,6 @@
 import * as React from 'react';
-import {
-  Component,
-  ComponentType,
-  createRef,
-  CSSProperties,
-  ReactNode,
-  useRef,
-} from 'react';
+import { useEffect, useState } from 'react';
+import { ComponentType, CSSProperties, ReactNode, useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import {
   ExitHandler,
@@ -72,93 +66,62 @@ interface CollapseProps {
   in?: boolean;
   onExited?: ExitHandler<undefined | HTMLElement>;
 }
-interface CollapseState {
-  width: Width;
-}
 
 // wrap each MultiValue with a collapse transition; decreases width until
 // finally removing from DOM
-export class Collapse extends Component<CollapseProps, CollapseState> {
-  duration = collapseDuration;
-  rafID?: number | null;
-  state: CollapseState = { width: 'auto' };
-  transition: { [K in TransitionStatus]?: CSSProperties } = {
-    exiting: { width: 0, transition: `width ${this.duration}ms ease-out` },
-    exited: { width: 0 },
-  };
-  nodeRef = createRef<HTMLDivElement>();
+export const Collapse = ({ children, in: _in, onExited }: CollapseProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState<Width>('auto');
 
-  componentDidMount() {
-    const { current: ref } = this.nodeRef;
+  useEffect(() => {
+    const { current } = ref;
+    if (!current) return;
 
     /*
-      A check on existence of ref should not be necessary at this point,
-      but TypeScript demands it.
+      Here we're invoking requestAnimationFrame with a callback invoking our
+      call to getBoundingClientRect and setState in order to resolve an edge case
+      around portalling. Certain portalling solutions briefly remove children from the DOM
+      before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
+      while the Select component is in this state.
     */
-    if (ref) {
-      /*
-        Here we're invoking requestAnimationFrame with a callback invoking our
-        call to getBoundingClientRect and setState in order to resolve an edge case
-        around portalling. Certain portalling solutions briefly remove children from the DOM
-        before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
-        while the Select component is in this state.
-      */
-      // cannot use `offsetWidth` because it is rounded
-      this.rafID = window.requestAnimationFrame(() => {
-        const { width } = ref.getBoundingClientRect();
-        this.setState({ width });
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.rafID) {
-      window.cancelAnimationFrame(this.rafID);
-    }
-  }
-
-  // get base styles
-  getStyle = (width: Width): CSSProperties => ({
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    width,
-  });
-
-  // get transition styles
-  getTransition = (state: TransitionStatus) => this.transition[state];
-
-  render() {
-    const { children, in: inProp, onExited } = this.props;
-    const exitedProp = () => {
-      if (this.nodeRef.current && onExited) {
-        onExited(this.nodeRef.current);
-      }
-    };
+    // cannot use `offsetWidth` because it is rounded
+    const rafId = window.requestAnimationFrame(() =>
+      setWidth(current.getBoundingClientRect().width)
+    );
 
-    const { width } = this.state;
+    return () => window.cancelAnimationFrame(rafId);
+  }, []);
 
-    return (
-      <Transition
-        enter={false}
-        mountOnEnter
-        unmountOnExit
-        in={inProp}
-        onExited={exitedProp}
-        timeout={this.duration}
-        nodeRef={this.nodeRef}
-      >
-        {(state) => {
-          const style = {
-            ...this.getStyle(width),
-            ...this.getTransition(state),
-          };
-          return (
-            <div ref={this.nodeRef} style={style}>
-              {children}
-            </div>
-          );
-        }}
-      </Transition>
-    );
-  }
-}
+  return (
+    <Transition
+      enter={false}
+      mountOnEnter
+      unmountOnExit
+      in={_in}
+      onExited={() => {
+        const { current } = ref;
+        if (!current) return;
+        onExited?.(current);
+      }}
+      timeout={collapseDuration}
+      nodeRef={ref}
+    >
+      {(state) => (
+        <div
+          ref={ref}
+          style={{
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            ...(state === 'exiting'
+              ? { width: 0, transition: `width ${collapseDuration}ms ease-out` }
+              : state === 'exited'
+              ? { width: 0 }
+              : { width }),
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </Transition>
+  );
+};

From 61f8ee986b8ac4466a5844577b244d0158751aa7 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Wed, 26 Oct 2022 14:55:10 +1100
Subject: [PATCH 2/4] Refactor MenuPlacer to functional component

---
 packages/react-select/src/components/Menu.tsx | 164 +++++++++---------
 1 file changed, 79 insertions(+), 85 deletions(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 602e13938e..0678e8f282 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -1,13 +1,13 @@
 /** @jsx jsx */
 import {
   createContext,
-  Component,
+  Fragment,
   ReactNode,
-  RefCallback,
-  ContextType,
-  useState,
+  Ref,
   useCallback,
+  useContext,
   useRef,
+  useState,
 } from 'react';
 import { jsx } from '@emotion/react';
 import { createPortal } from 'react-dom';
@@ -55,10 +55,10 @@ interface PlacementArgs {
 }
 
 export function getMenuPlacement({
-  maxHeight,
+  maxHeight: desiredMaxHeight,
   menuEl,
   minHeight,
-  placement,
+  placement: desiredPlacement,
   shouldScroll,
   isFixedPosition,
   theme,
@@ -67,7 +67,7 @@ export function getMenuPlacement({
   const scrollParent = getScrollParent(menuEl!);
   const defaultState: CalculatedMenuPlacementAndHeight = {
     placement: 'bottom',
-    maxHeight,
+    maxHeight: desiredMaxHeight,
   };
 
   // something went wrong, return default state
@@ -99,12 +99,12 @@ export function getMenuPlacement({
   const scrollUp = scrollTop + menuTop - marginTop;
   const scrollDuration = 160;
 
-  switch (placement) {
+  switch (desiredPlacement) {
     case 'auto':
     case 'bottom':
       // 1: the menu will fit, do nothing
       if (viewSpaceBelow >= menuHeight) {
-        return { placement: 'bottom', maxHeight };
+        return { placement: 'bottom', maxHeight: desiredMaxHeight };
       }
 
       // 2: the menu will fit, if scrolled
@@ -113,7 +113,7 @@ export function getMenuPlacement({
           animatedScrollTo(scrollParent, scrollDown, scrollDuration);
         }
 
-        return { placement: 'bottom', maxHeight };
+        return { placement: 'bottom', maxHeight: desiredMaxHeight };
       }
 
       // 3: the menu will fit, if constrained
@@ -140,15 +140,15 @@ export function getMenuPlacement({
       // 4. Forked beviour when there isn't enough space below
 
       // AUTO: flip the menu, render above
-      if (placement === 'auto' || isFixedPosition) {
+      if (desiredPlacement === 'auto' || isFixedPosition) {
         // may need to be constrained after flipping
-        let constrainedHeight = maxHeight;
+        let constrainedHeight = desiredMaxHeight;
         const spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
 
         if (spaceAbove >= minHeight) {
           constrainedHeight = Math.min(
             spaceAbove - marginBottom - spacing.controlHeight,
-            maxHeight
+            desiredMaxHeight
           );
         }
 
@@ -156,17 +156,17 @@ export function getMenuPlacement({
       }
 
       // BOTTOM: allow browser to increase scrollable area and immediately set scroll
-      if (placement === 'bottom') {
+      if (desiredPlacement === 'bottom') {
         if (shouldScroll) {
           scrollTo(scrollParent, scrollDown);
         }
-        return { placement: 'bottom', maxHeight };
+        return { placement: 'bottom', maxHeight: desiredMaxHeight };
       }
       break;
     case 'top':
       // 1: the menu will fit, do nothing
       if (viewSpaceAbove >= menuHeight) {
-        return { placement: 'top', maxHeight };
+        return { placement: 'top', maxHeight: desiredMaxHeight };
       }
 
       // 2: the menu will fit, if scrolled
@@ -175,7 +175,7 @@ export function getMenuPlacement({
           animatedScrollTo(scrollParent, scrollUp, scrollDuration);
         }
 
-        return { placement: 'top', maxHeight };
+        return { placement: 'top', maxHeight: desiredMaxHeight };
       }
 
       // 3: the menu will fit, if constrained
@@ -183,7 +183,7 @@ export function getMenuPlacement({
         (!isFixedPosition && scrollSpaceAbove >= minHeight) ||
         (isFixedPosition && viewSpaceAbove >= minHeight)
       ) {
-        let constrainedHeight = maxHeight;
+        let constrainedHeight = desiredMaxHeight;
 
         // we want to provide as much of the menu as possible to the user,
         // so give them whatever is available below rather than the minHeight.
@@ -209,9 +209,9 @@ export function getMenuPlacement({
       // 4. not enough space, the browser WILL NOT increase scrollable area when
       // absolutely positioned element rendered above the viewport (only below).
       // Flip the menu, render below
-      return { placement: 'bottom', maxHeight };
+      return { placement: 'bottom', maxHeight: desiredMaxHeight };
     default:
-      throw new Error(`Invalid placement provided "${placement}".`);
+      throw new Error(`Invalid placement provided "${desiredPlacement}".`);
   }
 
   return defaultState;
@@ -240,7 +240,7 @@ export interface MenuProps<
 > extends CommonPropsAndClassName<Option, IsMulti, Group>,
     MenuPlacementProps {
   /** Reference to the internal element, consumed by the MenuPlacer component */
-  innerRef: RefCallback<HTMLDivElement>;
+  innerRef: Ref<HTMLDivElement>;
   innerProps: JSX.IntrinsicElements['div'];
   isLoading: boolean;
   placement: CoercedMenuPlacement;
@@ -254,7 +254,7 @@ interface PlacerProps {
 }
 
 interface ChildrenProps {
-  ref: RefCallback<HTMLDivElement>;
+  ref: Ref<HTMLDivElement>;
   placerProps: PlacerProps;
 }
 
@@ -294,41 +294,40 @@ export const menuCSS = <
   zIndex: 1,
 });
 
-const PortalPlacementContext = createContext<{
-  getPortalPlacement:
-    | ((menuState: CalculatedMenuPlacementAndHeight) => void)
-    | null;
-}>({ getPortalPlacement: null });
-
-interface MenuState {
-  placement: CoercedMenuPlacement | null;
-  maxHeight: number;
-}
+const PortalPlacementContext =
+  createContext<
+    | {
+        setPortalPlacement: (placement: CoercedMenuPlacement) => void;
+      }
+    | undefined
+  >(undefined);
 
 // NOTE: internal only
-export class MenuPlacer<
+export const MenuPlacer = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
-> extends Component<MenuPlacerProps<Option, IsMulti, Group>, MenuState> {
-  state: MenuState = {
-    maxHeight: this.props.maxMenuHeight,
-    placement: null,
-  };
-  static contextType = PortalPlacementContext;
-  context!: ContextType<typeof PortalPlacementContext>;
-
-  getPlacement: RefCallback<HTMLDivElement> = (ref) => {
-    const {
-      minMenuHeight,
-      maxMenuHeight,
-      menuPlacement,
-      menuPosition,
-      menuShouldScrollIntoView,
-      theme,
-    } = this.props;
+>(
+  props: MenuPlacerProps<Option, IsMulti, Group>
+) => {
+  const {
+    children,
+    minMenuHeight,
+    maxMenuHeight,
+    menuPlacement,
+    menuPosition,
+    menuShouldScrollIntoView,
+    theme,
+  } = props;
 
-    if (!ref) return;
+  const { setPortalPlacement } = useContext(PortalPlacementContext) || {};
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [maxHeight, setMaxHeight] = useState(maxMenuHeight);
+  const [placement, setPlacement] = useState<CoercedMenuPlacement | null>(null);
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+    if (!current) return;
 
     // DO NOT scroll if position is fixed
     const isFixedPosition = menuPosition === 'fixed';
@@ -336,7 +335,7 @@ export class MenuPlacer<
 
     const state = getMenuPlacement({
       maxHeight: maxMenuHeight,
-      menuEl: ref,
+      menuEl: current,
       minHeight: minMenuHeight,
       placement: menuPlacement,
       shouldScroll,
@@ -344,26 +343,32 @@ export class MenuPlacer<
       theme,
     });
 
-    const { getPortalPlacement } = this.context;
-    if (getPortalPlacement) getPortalPlacement(state);
-
-    this.setState(state);
-  };
-  getUpdatedProps = () => {
-    const { menuPlacement } = this.props;
-    const placement = this.state.placement || coercePlacement(menuPlacement);
-
-    return { ...this.props, placement, maxHeight: this.state.maxHeight };
-  };
-  render() {
-    const { children } = this.props;
+    setMaxHeight(state.maxHeight);
+    setPlacement(state.placement);
+    setPortalPlacement?.(state.placement);
+  }, [
+    maxMenuHeight,
+    menuPlacement,
+    menuPosition,
+    menuShouldScrollIntoView,
+    minMenuHeight,
+    setPortalPlacement,
+    theme,
+  ]);
 
-    return children({
-      ref: this.getPlacement,
-      placerProps: this.getUpdatedProps(),
-    });
-  }
-}
+  return (
+    <Fragment>
+      {children({
+        ref,
+        placerProps: {
+          ...props,
+          placement: placement || coercePlacement(menuPlacement),
+          maxHeight,
+        },
+      })}
+    </Fragment>
+  );
+};
 
 const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
   props: MenuProps<Option, IsMulti, Group>
@@ -398,7 +403,7 @@ export interface MenuListProps<
   /** The children to be rendered. */
   children: ReactNode;
   /** Inner ref to DOM ReactNode */
-  innerRef: RefCallback<HTMLDivElement>;
+  innerRef: Ref<HTMLDivElement>;
   /** The currently focused option */
   focusedOption: Option;
   /** Props to be passed to the menu-list wrapper. */
@@ -594,23 +599,12 @@ export const MenuPortal = <
   const menuPortalRef = useRef<HTMLDivElement | null>(null);
   const cleanupRef = useRef<(() => void) | void | null>(null);
 
-  const [placement, setPlacement] = useState<'bottom' | 'top'>(
+  const [placement, setPortalPlacement] = useState<'bottom' | 'top'>(
     coercePlacement(menuPlacement)
   );
   const [computedPosition, setComputedPosition] =
     useState<ComputedPosition | null>(null);
 
-  // callback for occasions where the menu must "flip"
-  const getPortalPlacement = useCallback(
-    ({ placement: updatedPlacement }: CalculatedMenuPlacementAndHeight) => {
-      // avoid re-renders if the placement has not changed
-      if (updatedPlacement !== placement) {
-        setPlacement(updatedPlacement);
-      }
-    },
-    [placement]
-  );
-
   const updateComputedPosition = useCallback(() => {
     if (!controlElement) return;
 
@@ -690,7 +684,7 @@ export const MenuPortal = <
   );
 
   return (
-    <PortalPlacementContext.Provider value={{ getPortalPlacement }}>
+    <PortalPlacementContext.Provider value={{ setPortalPlacement }}>
       {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
     </PortalPlacementContext.Provider>
   );

From 0ca2d5ba4aa42fb2a1bf033bcee660a293e39e50 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Wed, 26 Oct 2022 15:03:35 +1100
Subject: [PATCH 3/4] Add changeset

---
 .changeset/spotty-pots-exist.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/spotty-pots-exist.md

diff --git a/.changeset/spotty-pots-exist.md b/.changeset/spotty-pots-exist.md
new file mode 100644
index 0000000000..a0b7c66280
--- /dev/null
+++ b/.changeset/spotty-pots-exist.md
@@ -0,0 +1,6 @@
+---
+'react-select': patch
+'@react-select/docs': patch
+---
+
+Change `class` components to `functional` components

From 4dcb00710ea74ed85eaba34d35fb0b317d5aec17 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:14:15 +1100
Subject: [PATCH 4/4] PR review fixes

---
 docs/examples/ControlledMenu.tsx              |  8 +-
 .../react-select/src/animated/transitions.tsx | 31 ++++---
 packages/react-select/src/components/Menu.tsx | 80 +++++++++----------
 3 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/docs/examples/ControlledMenu.tsx b/docs/examples/ControlledMenu.tsx
index e8708ebad1..a17f8095c6 100644
--- a/docs/examples/ControlledMenu.tsx
+++ b/docs/examples/ControlledMenu.tsx
@@ -14,10 +14,10 @@ export default () => {
 
   const toggleMenuIsOpen = () => {
     setMenuIsOpen((value) => !value);
-    const { current } = ref;
-    if (!current) return;
-    if (menuIsOpen) current.blur();
-    else current.focus();
+    const selectEl = ref.current;
+    if (!selectEl) return;
+    if (menuIsOpen) selectEl.blur();
+    else selectEl.focus();
   };
 
   return (
diff --git a/packages/react-select/src/animated/transitions.tsx b/packages/react-select/src/animated/transitions.tsx
index 30a4e592d4..d7742cef68 100644
--- a/packages/react-select/src/animated/transitions.tsx
+++ b/packages/react-select/src/animated/transitions.tsx
@@ -74,8 +74,8 @@ export const Collapse = ({ children, in: _in, onExited }: CollapseProps) => {
   const [width, setWidth] = useState<Width>('auto');
 
   useEffect(() => {
-    const { current } = ref;
-    if (!current) return;
+    const el = ref.current;
+    if (!el) return;
 
     /*
       Here we're invoking requestAnimationFrame with a callback invoking our
@@ -86,12 +86,23 @@ export const Collapse = ({ children, in: _in, onExited }: CollapseProps) => {
     */
     // cannot use `offsetWidth` because it is rounded
     const rafId = window.requestAnimationFrame(() =>
-      setWidth(current.getBoundingClientRect().width)
+      setWidth(el.getBoundingClientRect().width)
     );
 
     return () => window.cancelAnimationFrame(rafId);
   }, []);
 
+  const getStyleFromStatus = (status: TransitionStatus) => {
+    switch (status) {
+      default:
+        return { width };
+      case 'exiting':
+        return { width: 0, transition: `width ${collapseDuration}ms ease-out` };
+      case 'exited':
+        return { width: 0 };
+    }
+  };
+
   return (
     <Transition
       enter={false}
@@ -99,24 +110,20 @@ export const Collapse = ({ children, in: _in, onExited }: CollapseProps) => {
       unmountOnExit
       in={_in}
       onExited={() => {
-        const { current } = ref;
-        if (!current) return;
-        onExited?.(current);
+        const el = ref.current;
+        if (!el) return;
+        onExited?.(el);
       }}
       timeout={collapseDuration}
       nodeRef={ref}
     >
-      {(state) => (
+      {(status) => (
         <div
           ref={ref}
           style={{
             overflow: 'hidden',
             whiteSpace: 'nowrap',
-            ...(state === 'exiting'
-              ? { width: 0, transition: `width ${collapseDuration}ms ease-out` }
-              : state === 'exited'
-              ? { width: 0 }
-              : { width }),
+            ...getStyleFromStatus(status),
           }}
         >
           {children}
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 0678e8f282..a1a48da148 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import {
   createContext,
-  Fragment,
+  ReactElement,
   ReactNode,
   Ref,
   useCallback,
   useContext,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -55,10 +56,10 @@ interface PlacementArgs {
 }
 
 export function getMenuPlacement({
-  maxHeight: desiredMaxHeight,
+  maxHeight: preferredMaxHeight,
   menuEl,
   minHeight,
-  placement: desiredPlacement,
+  placement: preferredPlacement,
   shouldScroll,
   isFixedPosition,
   theme,
@@ -67,7 +68,7 @@ export function getMenuPlacement({
   const scrollParent = getScrollParent(menuEl!);
   const defaultState: CalculatedMenuPlacementAndHeight = {
     placement: 'bottom',
-    maxHeight: desiredMaxHeight,
+    maxHeight: preferredMaxHeight,
   };
 
   // something went wrong, return default state
@@ -99,12 +100,12 @@ export function getMenuPlacement({
   const scrollUp = scrollTop + menuTop - marginTop;
   const scrollDuration = 160;
 
-  switch (desiredPlacement) {
+  switch (preferredPlacement) {
     case 'auto':
     case 'bottom':
       // 1: the menu will fit, do nothing
       if (viewSpaceBelow >= menuHeight) {
-        return { placement: 'bottom', maxHeight: desiredMaxHeight };
+        return { placement: 'bottom', maxHeight: preferredMaxHeight };
       }
 
       // 2: the menu will fit, if scrolled
@@ -113,7 +114,7 @@ export function getMenuPlacement({
           animatedScrollTo(scrollParent, scrollDown, scrollDuration);
         }
 
-        return { placement: 'bottom', maxHeight: desiredMaxHeight };
+        return { placement: 'bottom', maxHeight: preferredMaxHeight };
       }
 
       // 3: the menu will fit, if constrained
@@ -140,15 +141,15 @@ export function getMenuPlacement({
       // 4. Forked beviour when there isn't enough space below
 
       // AUTO: flip the menu, render above
-      if (desiredPlacement === 'auto' || isFixedPosition) {
+      if (preferredPlacement === 'auto' || isFixedPosition) {
         // may need to be constrained after flipping
-        let constrainedHeight = desiredMaxHeight;
+        let constrainedHeight = preferredMaxHeight;
         const spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
 
         if (spaceAbove >= minHeight) {
           constrainedHeight = Math.min(
             spaceAbove - marginBottom - spacing.controlHeight,
-            desiredMaxHeight
+            preferredMaxHeight
           );
         }
 
@@ -156,17 +157,17 @@ export function getMenuPlacement({
       }
 
       // BOTTOM: allow browser to increase scrollable area and immediately set scroll
-      if (desiredPlacement === 'bottom') {
+      if (preferredPlacement === 'bottom') {
         if (shouldScroll) {
           scrollTo(scrollParent, scrollDown);
         }
-        return { placement: 'bottom', maxHeight: desiredMaxHeight };
+        return { placement: 'bottom', maxHeight: preferredMaxHeight };
       }
       break;
     case 'top':
       // 1: the menu will fit, do nothing
       if (viewSpaceAbove >= menuHeight) {
-        return { placement: 'top', maxHeight: desiredMaxHeight };
+        return { placement: 'top', maxHeight: preferredMaxHeight };
       }
 
       // 2: the menu will fit, if scrolled
@@ -175,7 +176,7 @@ export function getMenuPlacement({
           animatedScrollTo(scrollParent, scrollUp, scrollDuration);
         }
 
-        return { placement: 'top', maxHeight: desiredMaxHeight };
+        return { placement: 'top', maxHeight: preferredMaxHeight };
       }
 
       // 3: the menu will fit, if constrained
@@ -183,7 +184,7 @@ export function getMenuPlacement({
         (!isFixedPosition && scrollSpaceAbove >= minHeight) ||
         (isFixedPosition && viewSpaceAbove >= minHeight)
       ) {
-        let constrainedHeight = desiredMaxHeight;
+        let constrainedHeight = preferredMaxHeight;
 
         // we want to provide as much of the menu as possible to the user,
         // so give them whatever is available below rather than the minHeight.
@@ -209,9 +210,9 @@ export function getMenuPlacement({
       // 4. not enough space, the browser WILL NOT increase scrollable area when
       // absolutely positioned element rendered above the viewport (only below).
       // Flip the menu, render below
-      return { placement: 'bottom', maxHeight: desiredMaxHeight };
+      return { placement: 'bottom', maxHeight: preferredMaxHeight };
     default:
-      throw new Error(`Invalid placement provided "${desiredPlacement}".`);
+      throw new Error(`Invalid placement provided "${preferredPlacement}".`);
   }
 
   return defaultState;
@@ -265,7 +266,7 @@ export interface MenuPlacerProps<
 > extends CommonProps<Option, IsMulti, Group>,
     MenuPlacementProps {
   /** The children to be rendered. */
-  children: (childrenProps: ChildrenProps) => ReactNode;
+  children: (childrenProps: ChildrenProps) => ReactElement;
 }
 
 function alignToControl(placement: CoercedMenuPlacement) {
@@ -295,12 +296,9 @@ export const menuCSS = <
 });
 
 const PortalPlacementContext =
-  createContext<
-    | {
-        setPortalPlacement: (placement: CoercedMenuPlacement) => void;
-      }
-    | undefined
-  >(undefined);
+  createContext<{
+    setPortalPlacement: (placement: CoercedMenuPlacement) => void;
+  } | null>(null);
 
 // NOTE: internal only
 export const MenuPlacer = <
@@ -326,8 +324,8 @@ export const MenuPlacer = <
   const [placement, setPlacement] = useState<CoercedMenuPlacement | null>(null);
 
   useLayoutEffect(() => {
-    const { current } = ref;
-    if (!current) return;
+    const menuEl = ref.current;
+    if (!menuEl) return;
 
     // DO NOT scroll if position is fixed
     const isFixedPosition = menuPosition === 'fixed';
@@ -335,7 +333,7 @@ export const MenuPlacer = <
 
     const state = getMenuPlacement({
       maxHeight: maxMenuHeight,
-      menuEl: current,
+      menuEl,
       minHeight: minMenuHeight,
       placement: menuPlacement,
       shouldScroll,
@@ -356,18 +354,14 @@ export const MenuPlacer = <
     theme,
   ]);
 
-  return (
-    <Fragment>
-      {children({
-        ref,
-        placerProps: {
-          ...props,
-          placement: placement || coercePlacement(menuPlacement),
-          maxHeight,
-        },
-      })}
-    </Fragment>
-  );
+  return children({
+    ref,
+    placerProps: {
+      ...props,
+      placement: placement || coercePlacement(menuPlacement),
+      maxHeight,
+    },
+  });
 };
 
 const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -602,6 +596,12 @@ export const MenuPortal = <
   const [placement, setPortalPlacement] = useState<'bottom' | 'top'>(
     coercePlacement(menuPlacement)
   );
+  const portalPlacementContext = useMemo(
+    () => ({
+      setPortalPlacement,
+    }),
+    []
+  );
   const [computedPosition, setComputedPosition] =
     useState<ComputedPosition | null>(null);
 
@@ -684,7 +684,7 @@ export const MenuPortal = <
   );
 
   return (
-    <PortalPlacementContext.Provider value={{ setPortalPlacement }}>
+    <PortalPlacementContext.Provider value={portalPlacementContext}>
       {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
     </PortalPlacementContext.Provider>
   );