What is the best way to update a property on a model using React hooks

Nate — Mon, 11 Mar 2019 14:13:04 +0000

I'm switching from angularjs to react, and still learning the basic philosophy behind react.

I ran into an issue trying to bind an input element to a property on a model. I first tried using useReducer, which worked fine to update the model. The problem is that it does not trigger a re-render of the component, since the model is still the same model, just with an updated property. As far as react is concerned, nothing has changed, so it does not need to re-render.

I came up with two different solutions. The first is to clone the model on each update. In some cases this is fine, and maybe it's the functional programming way of doing things (I'm almost as new to functional programming as I am to React). But it seems like a waste to go around cloning things all the time.

The second solution is to use the forceUpdate strategy posted at https://medium.com/crowdbotics/how-to-use-usereducer-in-react-hooks-for-performance-optimization-ecafca9e7bf5. If I wrap that thing up in a nice custom hook, I can make it pretty clean. But I know that forceUpdate is not really recommended, and I'm not comfortable enough yet with react to know if this is a reasonable place to use it.

I've got everything laid out clearly in a jsfiddle at https://jsfiddle.net/nbrustein/odjwkbvs/31/

So, what should I be doing here? Is the solution:

Stop worrying and love the clone. It's what all the cool functional programmers are doing these days.
Use forceUpdate. This is what it's for.
Something else I haven't thought of yet.

Thanks in advance for any insights.

DEV Community: Nate

What is the best way to update a property on a model using React hooks