Should I mix variable and constant data inside a react state?

I'm trying to think about the data structure of my app and came into an interesting question:

I have some data that will be defined inside my code (without fetching) and won't change during the lifecycle of my app. Let's say that this data is a list of objects representing streets, that have properties such as name, size etc that are permanent.

But related to each street there are, for example, number of houses inside it, and it might change.

Is it better to use number of houses as a property and keep the entire streets list inside the app state, or have only a list of number of houses in the app state and associate them with streets based on indexes/keys?

Sorry, I couldn't figure out a better generical example. Thanks

I think the best approach for your case is to use useReducer hook which is efficient for states in format of Array/Object. So for the streets constant you can declare it in a separate file (consts.js for example) so you can reuse it in multiple components if needed then import it to your component where you want to handle the number of houses:

import { STREETS } from "consts";


const Actions = {
  ADD_HOUSE: 'ADD_HOUSE',
  REMOVE_HOUSE: 'REMOVE_HOUSE',
  UPDATE_HOUSES: 'UPDATE_HOUSES'
  RESET: 'RESET'
};
  
const initialState = { 
    streets: STREETS
}
  
function reducer(state, {type, payload}) {
    switch(type){
      case Actions.ADD_HOUSE:{
        //You logic
      }
      ...
    }
}
function YourComponent() {
  const [{ streets }, dispatch] = useReducer(reducer, initialState);
...
}

NOTE: It's better to separate the reducer logic from your component you can use another file called reducer.js for example then export Actions, initialState, reducer func.