3

I am making a simple note taking app in React. Here's what it looks like so far:

enter image description here

Each note bullet is a 'Cell' component which contains an inner div for more child Cell components. The App contains a div for the navbar and a div for notes, and in the notes div I render the Cells using .map(). Notes are stored in the App state like this...

notes: [
        {
          contents: "Learn React",
          children: [
            {
              contents: "Finish tutorial series",
              children: []
            },
            {
              contents: "Do example project",
              children: []
            }
          ]
        },
        {
          contents: "Learn Redux",
          children: []
        },
        {
          contents: "Build note-taking app",
          children: []
        }
      ]

(I have a function in the constructor that dynamically gives an id number to each note before rendering the App.)

My issue is that every time the user modifies a note, that modifies the corresponding note in the notes object in the App state (Cells have an onBlur handler passed from App that passes up the Cell's id and I then search the notes object of that id and change the content), and this causes the entire page to rerender since the top level state changed. Doesn't this defeat the whole purpose of React? If the whole App component gets re-rendered when its state changes I'd think 'lifting up state' to the App level would be bad, but it seems like React encourages this.

I need to store the notes at the top level state so I can export them or change to a new page of notes using the navbar, but if I do this then every time I change any bullet note, every other one also re-renders, isn't that a problem?

pyjamas
  • 4,608
  • 5
  • 38
  • 70

1 Answers1

1

Well, in general that's the purpose of the "virtual DOM". React first does a hidden execution of the render function without actually building it on the DOM. It compares this virtual render against the current one, to see if there are any differences.

When react builds the virtual DOM and sees that it is the same as the rendered DOM, it does not execute the actual rendering.

So it's not as costly to manipulate that high level state as you may think.

That said; Why do you need to manage the state for this at such a high level? It's generally bad practice to rely heavily on global state, and there's nothing immediately obvious about your component that seems to demand the global state. If you can keep things local, you're better off!

Jake Haller-Roby
  • 6,335
  • 1
  • 18
  • 31
  • The reason I made it global was because I wanted to be able to easily save or load all the notes on your screen to the corresponding navbar page, or export to a text file. If I kept the bullet text values in the individual Cell states what would be the best way to access them when I'm trying to get the whole page of notes at the App level? A parent component is not supposed to read the state of its child components, right? – pyjamas Nov 19 '18 at 00:03
  • You may find this helpful (if scaled up to meet your needs). The idea is to manage state centrally while components only update as needed. Might work for you, might not. https://stackoverflow.com/questions/38901106/how-to-make-a-shared-state-between-two-react-components. This is the type of thing discussed in the docs here: https://reactjs.org/docs/thinking-in-react.html#step-5-add-inverse-data-flow – Randy Casburn Nov 19 '18 at 00:26