I have a situation where on one screen (AScreen), I load JSON data from a .json file, I also have a Settings screen where the user can set 'settingA' as true or false.

AScreen (basically if settingA is set to true, load two JSON files, if settingA is false, load only one data file):

import React, { useContext } from 'react';
import { SettingsContext } from '../context/settingsContext';

const AScreen = () => {
  const { settingA } = useContext(SettingsContext);

  const loadedData = (() => {
    if (settingA === true) {
      console.log('True');
      return Object.assign(
        require('../assets/data/jsonFileA.json'),
        require('../assets/data/jsonFileB.json')
      )
    }
    console.log('False');
    return require('../assets/data/jsonFileA.json')
  })();

  console.log(settingA):
  console.log(loadedData);

  return (
    ...
  );
};

The issue here is that if I load the app and head to AScreen, I get the correct data loaded into loadedData. However, if I then head to the settings page and change the setting then go back to AScreen, the console.log(settingA) shows the updated setting and the correct 'True' or 'False' is printed but the loadedData still contains the data from the first time I visited AScreen.

This tells me that the require() function doesn't actually get called until the screen is fully re-rendered.

Is there a better way to load JSON data than require()? Or how can I make sure require() is called every time the screen is displayed even if the screen isn't re-rendered.

I know one option would be to load all the JSON data then simply filter it based on the user's settings but in the actual app there are a lot more data files so it seems that would be a waste of resources to load all the files at once.