In order to experiment with React's new hooks API, I've been building an app calledFretfull, which lets you explore different ways to play chords on guitar. The app'ssource code uses hooks throughout for context and state.

While building the app, I created something I call a "dependent state" custom hook. It's useful when you have a piece of state with a range of valid values that are calculated based on one or more dependencies. If a dependency changes, the state's current value may no longer be valid, and will need to be checked and possibly reset.

To make that more concrete, consider the following situation:

1. An app receives a list of product categories from the server.
2. The app displays the list of categories in the UI.
3. The user selects a category.
4. The app receives an updated list of categories from the server.

At this point, the selected category may or may not be valid, depending on whether it still exists in the list of updated categories. Therefore, the app needs to be smart about how it applies the update. If the category no longer exists, keeping it selected will result an inconsistent and invalid application state. However, automatically resetting it will result in a poor user experience if the categoryis still valid. The code will need to check the updated list and reset the selectiononly if the selection is not found.

Let's consider how we might implement this scenario using React hooks.

functionCategories({apiData}:{apiData:CategoriesApiResult}){constcategories=useMemo(()=>{returnapiData.data.map(cat=>cat.name);},[apiData]);const[category,setCategory]=useState(categories[0]);return<OptionListoptions={categories}selected={category}onSelect={e=>setCategory(e.value)}/>;}

Here the Categories component creates the list of category options by mapping over the data from an API call received as a prop. We memoize the calculation so it is only executed when the API data changes. We also store the selected category as a piece of state, defaulting it to the first category in the list.

However, this code has a bug: Ifcategories changes, the value ofcategory may no longer be valid. We need to check that it's still valid, and optionally reset it. We can do this as follows:

let[category,setCategory]=useState(null);constcategories=useMemo(()=>{constresult=apiData.data.map(cat=>cat.name);if(!result.includes(category){setCategory(category=result[0]);}},[apiData]);

Now we avoid the bug, but at the expense of muddying up our render logic. We have to makecategory reassignable, define it beforecategories, and include a side effect in ourcategories memoization function that resetscategory.

We can make this approach cleaner and more reusable by implementing a custom hook, that we'll calluseDependentState:

functionuseDependentState<S>(factory:(prevState?:S)=>S,inputs:ReadonlyArray<any>,):[S,Dispatch<SetStateAction<S>>]{let[state,setState]=useState<S>(factory());useMemo(()=>{constnewState=factory(state);if(newState!==state){setState(state=newState);}},inputs);return[state,setState];}

This hook captures the essence of the above logic in a generic form. It defines a piece of state and run a memoized function that runs only when the dependencies change. This memoized function delegates to a factory function that we must provide, and which is responsible for either generating the initial value or changing the current value if it's no longer valid. Let's see how we could use it in the previous example:

constcategories=useMemo(()=>{returnapiData.data.map(cat=>cat.name);},[apiData]);const[category,setCategory]=useDependentState(prevState=>{return(prevState&&categories.includes(prevState))?prevState:categories[0];},[categories]);

Our custom hook means we can keepcategory as a const, keep the original definition order, and the only logic we have to implement is the check as to whether theprevState value is still valid.

Conclusion

Hopefully this custom hook may prove useful to anyone facing a similar issue with state whose validity depends on some dependencies.

The only downside I see to this custom hook is that it has to callsetState to update the state value when it changes, which will result in a second render. But I can't see any way to avoid this. I havesubmitted a React feature suggestion with the idea of enhancing the regularsetState hook with the ability to provide dependencies that cause it to be re-initialised in a similar manner to this custom hook. If implemented, this would eliminate the need for the additional render, as theprevState value would not have "leaked", because the check logic would occur within theuseState call.