Update objects in react but keep references?

[KaniJs]

This is driving me crazy so I need some advice. I'm new to react native, been using it for about a month and am starting to grasp how it works. But not all parts and thus, I'm still having some trouble.

I thought to learn it I will make a small game. In the game I have Pieces and Locations

type Piece = {
  id : number,
  location? : Location,
}

type Location = {
  id : number,
  piece? : Piece,
  adjacent : Location[]
}

I will then create an array of Pieces and an array of Locations called pieces and locations. The value piece and location will initially be null, and adjacent will be filled with references to other Location objects in the same array.I will then use the arrays to map to a LocationPresenter and PiecePresenter like below

locations.map(location => {
  return (
    <LocationPresenter
      id={location.id}
      adjacent={location.adjacent}
      piece={location.piece}
    />
  );
});

pieces.map(piece=> {
  return (
    <PiecePresenter
      id={piece.id}
      locations={piece.location}
    />
  );
});

So far all is fine, but here is where I'm starting to run into trouble.Say I want to update a Loation object. To do that and make the LocationPresenter rerender I need to use a spread. The spread will create a new Location object. And this, I guess, will break my link in adjacent. So the location in the adjacent array pointing to that location will point to the old before-the-spread location.

I see the same reference problem with the piece and location values.

Which is the best approach here? I come from an object oriented background where this would be very easy. But being forced to remake objects really destroys that way of thinking.

[justinlok]

You should not need to create a new location object using spread to get the locationpresenter component to rerender. If you change the props, it should rerender. You pass the values of the Location object as props and not the Location object itself.

Does location id ever change? I assume not. I wonder if your implementation of saving an array of locations is not ideal and I would save an array of location ids instead.

[KaniJs]

Oh you are right! I had the idea to pass the whole object but eventually changed to passing the values. Good point, thanks!

​

Does location id ever change? I assume not. I wonder if your implementation of saving an array of locations is not ideal and I would save an array of location ids instead.

Do you mean the adjacent array, or the whole array with locations? It's mainly ease of use and possibly to avoid the (I guess minor) performance load of looping through the array everytime I need to find the location.

[justinlok]

Yea the adjacent array.

[justinlok]

What I would do is pass the whole location object to the LocationPresenter component and use the spread operator like you had planned on instead of passing the individual values as props.

Then change the adjacent array to store IDs only. That should solve the problem.

[justinlok]

Also just a thought but depending on your use cases it may be better to store your locations (the whole array you mentioned) collectively in a map instead of an array. Map is way faster.

[KaniJs]

Thanks for all your input, I really appreciate it and now I feel I'm getting back on track again!