For lack of a better name, we'll call this component App(). In essence, it is the app since it holds all of the application state and all of the side-effects that control what the user sees. To start, we have to pass the component the initial state of our application. The initial state is used by side-effects to perform the initial render. Then, once the user starts interacting with the UI, we can change the initial state.

We could pass the initial state into the component like this:

App(Map.of(
  'first', '',
  'last', '',
  'age', 0
));

The application state, in this case, is represented by a map with three key-value pairs. The values are two empty strings and an age of zero, which probably isn't very meaningful to the user. It doesn't matter though, because the side-effect functions that rely on this state have something to render initially. Once we change any or all of these values, the side-effects will run again, rendering relevant information.

Immutable.js collections are good at reusing data when mutative methods are called. This is how you're able to use a single map as your application state. You'll probably want to organize the state of your application into sections that reflect the on-screen organization of your UI. This probably means creating nested collections in your application state:

App(Map.of(
  'home', Map.of(
    'showUpdates', true,
    'updates', List.of(
      'Update 1...',
      'Update 2...'
    )
  ),
  'users', Map.of(
    'visible', false,
    'users', Set()
  ),
  'settings', Map.of(
    'emailLevel', 'ultraspam',
    'resultsPerPage', 10
  )
));

With this initial state in place, your side-effects can run. This also gives you a sense of what's likely to change in response to user interactions. For example, if a new update gets pushed to the updates list in the home map, the rest of the application state remains unchanged. Also, this initial state helps form the shape of your side-effect functions.