-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor(react): consolidate useControllableState to one hook #10255
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,68 +8,90 @@ | |
import { useEffect, useRef, useState } from 'react'; | ||
import { warning } from './warning'; | ||
|
||
export function useControllableState( | ||
controlledState, | ||
controlledSetState, | ||
defaultValue | ||
) { | ||
const controlled = useRef(controlledState !== undefined); | ||
const [state, internalSetState] = useState(() => { | ||
if (controlled.current === true) { | ||
return controlledState; | ||
} | ||
return defaultValue; | ||
}); | ||
/** | ||
* This custom hook simplifies the behavior of a component if it has state that | ||
* can be both controlled and uncontrolled. It functions identical to a | ||
* useState() hook and provides [state, setState] for you to use. You can use | ||
* the `onChange` argument to allow updates to the `state` to be communicated to | ||
* owners of controlled components. | ||
* | ||
* Note: this hook will warn if a component is switching from controlled to | ||
* uncontrolled, or vice-verse. | ||
* | ||
* @param {object} config | ||
* @param {string} config.name - the name of the custom component | ||
* @param {any} config.defaultValue - the default value used for the state. This will be | ||
* the fallback value used if `value` is not defined. | ||
* @param {Function} config.onChange - an optional function that is called when | ||
* the value of the state changes. This is useful for communicating to parents of | ||
* controlled components that the value is requesting to be changed. | ||
* @param {any} config.value - a controlled value. Omitting this means that the state is | ||
* uncontrolled | ||
* @returns {[any, Function]} | ||
*/ | ||
export function useControllableState({ | ||
defaultValue, | ||
name = 'custom', | ||
onChange, | ||
value, | ||
}) { | ||
const [state, internalSetState] = useState(value ?? defaultValue); | ||
const controlled = useRef(null); | ||
|
||
// If the owner is controlling the component prop value, keep the controlled | ||
// state value and the internal state value in sync. | ||
// | ||
// We guard on `undefined` to prevent downstream breakage of controlled | ||
// components (like <input>). When the controlled state switches to | ||
// `undefined`, we are moving from controlled to uncontrolled. | ||
if ( | ||
controlled.current === true && | ||
controlledState !== state && | ||
controlledState !== undefined | ||
) { | ||
internalSetState(controlledState); | ||
if (controlled.current === null) { | ||
controlled.current = value !== undefined; | ||
} | ||
|
||
function setState(stateOrUpdater) { | ||
if (controlled.current === true) { | ||
controlledSetState(stateOrUpdater); | ||
} else { | ||
internalSetState(stateOrUpdater); | ||
const value = | ||
typeof stateOrUpdater === 'function' | ||
? stateOrUpdater(state) | ||
: stateOrUpdater; | ||
|
||
if (controlled.current === false) { | ||
internalSetState(value); | ||
} | ||
|
||
if (onChange) { | ||
onChange(value); | ||
} | ||
} | ||
|
||
useEffect(() => { | ||
const controlledValue = value !== undefined; | ||
|
||
// Uncontrolled -> Controlled | ||
// If the component prop is uncontrolled, the prop value should be undefined | ||
if (controlled.current === false && controlledState !== undefined) { | ||
if (controlled.current === false && controlledValue) { | ||
warning( | ||
false, | ||
'A component is changing an uncontrolled component to be controlled. ' + | ||
'A component is changing an uncontrolled %s component to be controlled. ' + | ||
'This is likely caused by the value changing to a defined value ' + | ||
'from undefined. Decide between using a controlled or uncontrolled ' + | ||
'value for the lifetime of the component. ' + | ||
'More info: https://reactjs.org/link/controlled-components' | ||
'More info: https://reactjs.org/link/controlled-components', | ||
name | ||
); | ||
} | ||
|
||
// Controlled -> Uncontrolled | ||
// If the component prop is controlled, the prop value should be defined | ||
if (controlled.current === true && controlledState === undefined) { | ||
if (controlled.current === true && !controlledValue) { | ||
warning( | ||
false, | ||
'A component is changing a controlled component to be uncontrolled. ' + | ||
'A component is changing a controlled %s component to be uncontrolled. ' + | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what does There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
console.log('Hello, %s', 'world'); // 'Hello, world' Basically it's a way of interpolating values into a string |
||
'This is likely caused by the value changing to an undefined value ' + | ||
'from a defined one. Decide between using a controlled or ' + | ||
'uncontrolled value for the lifetime of the component. ' + | ||
'More info: https://reactjs.org/link/controlled-components' | ||
'More info: https://reactjs.org/link/controlled-components', | ||
name | ||
); | ||
} | ||
}, [controlledState]); | ||
}, [name, value]); | ||
|
||
if (controlled.current === true) { | ||
return [value, setState]; | ||
} | ||
|
||
return [state, setState]; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Out of curiosity, what would an example of
name
being used be? Would it be the name of the state being used or the component that is being controlled?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@abbeyhrt great question, it'd be the latter. The idea with
name
was that a component could provide thename
argument to offer better development error messages. So, for example,Tabs
coulduseControllableState({ name: 'Tabs' })
and it would say that "a Tabs component is switching from controlled to uncontrolled"