[Solved] Local storage updating problems

#1

I’ve hit an issue in my Recipe app.

When I add a recipe, local storage updates, but when I edit or delete one, it doesn’t (unless I also add a new recipe to write the whole state back to storage).

My app is here: https://jacksonbates.github.io/fcc-recipe-react/public
The repo is here: https://github.com/jacksonbates/fcc-recipe-react

And I think the problem is something to do with the way componentDidUpdate works…maybe a child updating isn’t enough to trigger a full re-render that the componentDidUpdate method recognises?

I handle the lifecycle methods in the recipeBookApp.js

Any ideas?

#2

A Melbourne camper spotted the issue in our Slack channel.

I was conditionally checking against the length of the recipes array in state. When I removed that condition and just wrote the state to storage in every update, it worked.

Probably a few more CPU cycles than necessary…but it’ll do :slight_smile:

#3

You could wrap it into a throttling / debounce function.

That’s a common pattern when writing in storage.
(you’ll find it probably even on the Redux documentation about subscribing store changes to localStorage).

Not that you really need it for a recipe app… but it’s good to know imho :slight_smile:

#4

Thanks for the tip. I avoided Redux for this one, but I’ll bear it in mind.

#5

Oh don’t get me wrong, Redux has nothing to do with Throttle || Debounce,

it was just to say that using those functions are common enough that you’ll see it even on popular libraries documentation.

(sorry for the confusion)

1 Like
#6

No worries - I appreciate the clarification :slight_smile: