In <LocationFilter />, the <LocationItem> component was missing its key. Also, since .sort() mutates its list, I added .slice() beforehand to avoid unintentionally mutating the locations argument.
Separately, in <PostcodeSearch />, extra logic is added to avoid a data race in the async function called in useEffect. Specifically, if the user has a slow connection and changes the postcode quickly, then the requests might resolve out-of-order, causing an earlier request to overwrite a later one. To prevent this, we can track whether the current request is still current by adding a current local variable, and updating it in the returned "cleanup" callback. This transformation could probably be applied more productively elsewhere, but I haven't investigated the rest of the codebase yet.
In
<LocationFilter />, the<LocationItem>component was missing itskey. Also, since.sort()mutates its list, I added.slice()beforehand to avoid unintentionally mutating thelocationsargument.Separately, in
<PostcodeSearch />, extra logic is added to avoid a data race in theasyncfunction called inuseEffect. Specifically, if the user has a slow connection and changes the postcode quickly, then the requests might resolve out-of-order, causing an earlier request to overwrite a later one. To prevent this, we can track whether the current request is still current by adding acurrentlocal variable, and updating it in the returned "cleanup" callback. This transformation could probably be applied more productively elsewhere, but I haven't investigated the rest of the codebase yet.