Best Pattern to manage React component status with Hooks

Question

Hello, everybody I’m starting with Reactjs Could someone ask a question, please?

I was introduced to the two ways of creating components (of classes and functions), and chose to use ALWAYS functions (at least for now) Even on App.js, since we can now manipulate states via Hooks, right? hahahahaha

Well, I’m still a little confused about useState, so get this:

Apparently, when we use classes, the old States are merged with the new ones, so we keep the old ones intact, right... But with functional components and useState, we need to worry about all states And that’s my biggest wrap huahuhahhauauh

Since we have to individually manage each state, would it be better to create several and several, and so take care of each one separately? Which is the most suitable Pattern?

I’ll send you a little bit of code:

const App = () => {

  const [ personsState, setPersonsState ] = useState({
    persons: [
      {name: 'Max', age: 28 },
      {name: 'Eddie', age: 20 },
      {name: 'Julie', age: 25 }
    ],
    showPersons: false
  });

  const inputNameHandler = (event) => {
    setPersonsState({
      persons: [
        {name: personsState.persons[0].name, age: personsState.persons[0].age },
        {name: event.target.value, age: personsState.persons[1].age },
        {name: personsState.persons[2].name, age: personsState.persons[2].age }
      ]
    });
  }

  // minha maior dúvida é aqui
  // eu deveria ter criado outro useState só para o showPerson?
  // esta seria a melhor opção para manter os states antigos?

  const togglePersonsHandler = () => {
    const showing = personsState.showPersons;
    setPersonsState({
      persons: personsState.persons,
      showPersons: !showing
    });
  }

From now on, thank you guys!

Answer 1

Guy with the useState you can do the following.

setPersonsState({ ...personsState, persons: [...personsState.persons, {name: "Armando", age: 19}] })

For you to add a user without deleting any state, you need to call setPersonsState(), add the previous state, and the data you want to add.

[...personsState.Persons ] adds the entire existing array.

Give one studied at ES6+, take a look at this course free, very good

Answer 2

Next, you make each state separate, if you have a list of values and have a value true/false are separate data, perhaps related, but, do separate for various reasons, one is organization, other manipulation of this information becomes simpler each in its own state, for display or speech it is much easier to separate the data.

Your code is better this way:

function App() {
  const [persons, setPersons] = React.useState([
      {name: 'Max', age: 28 },
      {name: 'Eddie', age: 20 },
      {name: 'Julie', age: 25 }
  ]);
  const [show, setShow] = React.useState(false);
  return (
    <div>
      <ul>
      { show && persons.map((person, i) => (
          <li key={i}>{person.name} - {person.age}</li>
          )
        )
      }
      </ul>
      <button onClick={e => setShow(!show)}>
        {show ? 'Esconder' : 'Mostrar'}
      </button>
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

In the code I reinforce that the states of the component should always be separated.

• Introduction to the Hooks
• React V16.8: React with Hooks
• Hooks in summary form
• Using the Hook State
• Using Effect Hook (Effect Hook)
• Hooks rules
• Creating Your Own Hooks
• Hooks Reference API
• Hooks FAQ