React - optymalny sposób inicjalizacji stanu

W tym artykule chcielibyśmy pokazać Ci optymalny sposób inicjalizacji stanu w Reakcie.

Kiedy inicjalizacja stanu w komponencie wymaga skomplikowanych operacji, jako argument useState możemy przekazać funkcję strzałkową (zamiast typowego argumentu jakim jest obiekt).
To podejście zapobiega wykonywaniu skomplikowanych operacji za każdym razem, gdy komponent jest ponownie renderowany z takimi samymy parametrami.

W naszym przypadku zapobiegamy parsowaniu jsonOrData przy każdym ponownym renderowaniu App, przekazując funkcję strzałkową jako argument useState.

Dobre podejscie:

const [data, setData] = React.useState(() => createData(jsonOrData));

Złe podejście: 

const [data, setData] = React.useState(createData(jsonOrData));

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const createData = (jsonOrData) => {
    if (typeof jsonOrData === 'string') {
      	return JSON.parse(jsonOrData);
    }
    return jsonOrData;
};

const User = ({jsonOrData}) => {
  // Kiedy utworzenie stanu jest utrudnione powinniśmy użyć useState(() => ...)
  const [data, setData] = React.useState(() => createData(jsonOrData));

  // Kiedy zmiana stanu jest utrudniona powinniśmy użyć useEffect(() => ..., [...])
  React.useEffect(() => createData(jsonOrData), [jsonOrData]);
  return (
    <div>
      {data.name} {data.age}
    </div>
  );
};

const App = () => {
  	const user = {
        name: 'John',
        age: 25,
        // jakieś inne właściwości...
    };
  	return (
      <div>
        <User jsonOrData={user} />
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );