Skip to content

Commit

Permalink
Rename internal forwardedRef usage (reduxjs#1553)
Browse files Browse the repository at this point in the history
* Rename internal forwardedRef usage to reactReduxForwardedRef to limit namespace collision of a parent component passing in a prop called forwardedRef

* Formatting changes

Co-authored-by: Drew Schuster <dschuster@slack-corp.com>
  • Loading branch information
dtschust and dtschust authored Mar 24, 2020
1 parent d66d9f5 commit 63bde33
Showing 1 changed file with 15 additions and 6 deletions.
21 changes: 15 additions & 6 deletions src/components/connectAdvanced.js
Original file line number Diff line number Diff line change
Expand Up @@ -272,12 +272,16 @@ export default function connectAdvanced(
const usePureOnlyMemo = pure ? useMemo : callback => callback()

function ConnectFunction(props) {
const [propsContext, forwardedRef, wrapperProps] = useMemo(() => {
const [
propsContext,
reactReduxForwardedRef,
wrapperProps
] = useMemo(() => {
// Distinguish between actual "data" props that were passed to the wrapper component,
// and values needed to control behavior (forwarded refs, alternate context instances).
// To maintain the wrapperProps object reference, memoize this destructuring.
const { forwardedRef, ...wrapperProps } = props
return [props.context, forwardedRef, wrapperProps]
const { reactReduxForwardedRef, ...wrapperProps } = props
return [props.context, reactReduxForwardedRef, wrapperProps]
}, [props])

const ContextToUse = useMemo(() => {
Expand Down Expand Up @@ -437,8 +441,13 @@ export default function connectAdvanced(
// Now that all that's done, we can finally try to actually render the child component.
// We memoize the elements for the rendered child component as an optimization.
const renderedWrappedComponent = useMemo(
() => <WrappedComponent {...actualChildProps} ref={forwardedRef} />,
[forwardedRef, WrappedComponent, actualChildProps]
() => (
<WrappedComponent
{...actualChildProps}
ref={reactReduxForwardedRef}
/>
),
[reactReduxForwardedRef, WrappedComponent, actualChildProps]
)

// If React sees the exact same element reference as last time, it bails out of re-rendering
Expand Down Expand Up @@ -472,7 +481,7 @@ export default function connectAdvanced(
props,
ref
) {
return <Connect {...props} forwardedRef={ref} />
return <Connect {...props} reactReduxForwardedRef={ref} />
})

forwarded.displayName = displayName
Expand Down

0 comments on commit 63bde33

Please sign in to comment.