React redux saga multiple renders

Question

I'm new to react and I'm having an issue of multiple renders and I was just wondering if I'm doing this right, so I dispatched an action to get a note list, in my list component which looks like this for now :

import React, {useState, useEffect} from 'react';

export default function NoteList (props){


const [ noteList, updateNoteList ] = useState([]);

useEffect(()=>{
    updateNoteList(
        props.noteList.map(note => {
            return {...note, mode : 'title-mode'};
        })
    )
},[props.noteList])



console.log(noteList);
return (
    <div>

    Notes come here

    </div>
  )

}

this component is connected in another container class but that's irrelevant, so what happens is this component renders 4 times, two times without the useEffect hook and two more with it, what I want to achieve is I need to add an item in the object of each note (which is mode : title-mode) in a state for this component which works fine with this code, as to why I'm adding this mode in a state is that I want to change this inside the note array so I can change the view mode for each note , but this component renders 4 times as I mentioned, and in my head no way that this is the correct way to do this.

Please help if you have the time .

Answer 1

We could achieve the display of the notes list by making a display-mode state in the <Note /> component it self so changing the mode won't affect other notes and this way we won't have extra re-renders, also using this approach will allow also modifying the note locally without dispatching it to the store then we could update the store at the end gaining in perfs. So basically this is the approach (codesandbox):

const Note = ({ title, content }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div
      style={{ border: "1px solid", margin: 5 }}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      {!isExpanded ? (
        <div>
          <h2>{title}</h2>
        </div>
      ) : (
        <div>
          <h2>{title}</h2>
          <p>{content}</p>
        </div>
      )}
    </div>
  );
};

function App() {
  // this is the notes state, it could be coming from redux store so
  // we could interact with it (modifying it if we need)
  const [notes, setNotes] = React.useState([
    { id: 1, title: "note 1", content: "this is note 1" },
    { id: 2, title: "note 2", content: "this is note 2" }
  ]);

  return (
    <div className="App">
      {notes.map((note) => (
        <Note key={note.id} {...note} />
      ))}
    </div>
  );
}