Delays creating a stateful value until some condition is met.
useState()
hook to create a stateful value containing the actual state
and a boolean, loaded
.useEffect()
hook to update the stateful value if the condition
or loaded
changes.updateState
, that only updates the state
value if loaded
is truthy.const useDelayedState = (initialState, condition) => {
const [{ state, loaded }, setState] = React.useState({
state: null,
loaded: false,
});
React.useEffect(() => {
if (!loaded && condition) setState({ state: initialState, loaded: true });
}, [condition, loaded]);
const updateState = newState => {
if (!loaded) return;
setState({ state: newState, loaded });
};
return [state, updateState];
};
const App = () => {
const [branches, setBranches] = React.useState([]);
const [selectedBranch, setSelectedBranch] = useDelayedState(
branches[0],
branches.length
);
React.useEffect(() => {
const handle = setTimeout(() => {
setBranches(['master', 'staging', 'test', 'dev']);
}, 2000);
return () => {
handle && clearTimeout(handle);
};
}, []);
return (
<div>
<p>Selected branch: {selectedBranch}</p>
<select onChange={e => setSelectedBranch(e.target.value)}>
{branches.map(branch => (
<option key={branch} value={branch}>
{branch}
</option>
))}
</select>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
React, Hooks
Returns a stateful value, persisted in localStorage
, and a function to update it.
React, Hooks
Tracks the browser's location hash value, and allows changing it.
React, Hooks
Creates a stateful value, returning a getter and a setter function.