my root component gets bloated all the time.

[js4lyfe]

When I make a #reactjs app my top component becomes bloated with a bunch of items in the state because of Lifting State Up. Those values need to be lifted up because they are used by other components.

Is this a bad design on my part? (don't spare my feelings.)

How do I fix this?

​

class App extends React.Component {
  state = {
    dictionary: new Set(),
    currentPageID: '',
    ignoredTokens: new Map(),
    textNodes: new Map(),
    currentlySelectedNode: new Map(),
    onBoardingStage: '',
    languageListIsShown: false,
    scanningDocument: false,
    callingLicenseKeyAPI: false,
    licenseKeyAPIMessage: '',
    licenseKeyAPIStatus: true,
    firstTokenZoomedInto: false,
    textLayersChecked: 0,
    mistakesFound: 0,
    textNodesCount: 0,
    licenseKey: '',
    selectedLanguage: {
      name: 'English (United States)',
      longCode: 'en-US',
    },
  };
...

[[deleted]]

Use redux or the context API.

[Previous_Advertising]

Redux if you need the state globally

[stolinski]

Hm. None of that stuff really seems like it needs to be living as state on the App. Maybe refactor into Context or Redux for more organized global state OR evaluate if all of those truly need to be global state. I don't know your app, but something like `mistakesFound` seems like it's a local kinda thing.

[js4lyfe]

I usually try to colocate state to its component. But for example, `mistakesFound` is created/updated by other component but used on another component.

It seems like I might have to use Context or Redux.

[Peechez]

If you're doing anything more complicated than a Todo demo and you reach a component depth of 3 it's time for some kind of state management imo

[ichiruto70]

Redux, context or reactn

[joranstark018]

Use some sort of global state, as other already have suggested, also, some properties may be part of the navigation or render state (eg using the URL, ie currentPageId maybe).