Przeczytałam właśnie artykuł o optymalizacji Reacta. Jeden z punktów mówił, że w render należy unikać deklaracji, jednak nie pisał jak to obejść. I tu rodzi się pytanie.
Mam w render
const row = 'd-flex flex-column flex-sm-row align-items-center justify-content-center p-2'
const column = 'd-flex flex-column w-100 '
const arrayOfSearchFieldNames = [...sourceArrayOfSearchFieldNames];
const arrayOfPlaceholders = [...sourcePlaceholders];
const inputFieldStyle ='d-inline m-2 p-1 border rounded';
const SubmitButtonClass = 'btn btn-outline-success m-2 px-5 shadowTextNorm';// prawdopodobnie klasa shadowtextNorm nie istnieje
const ResetFieldsClass = 'btn btn-outline-warning m-2 px-5' ;
const areButtonsHidden = (this.state.authors === '' && this.state.title === '' && this.state.subject === '' );
coś takiego. Jest to wyizolowane z jednej przyczyny - klarowność w return
. Komponent jest raczej regularnie modyfikowany. Z artykułu wynikało, że każda inicjalizacja to dodatkowy czas, stąd pytanie jak najlepiej do tego podejść. Jedna prawie oczywista rzecz to zrobienie z tego obiektu - wtenczas będzie to inicjalizowane jeden raz na jeden re-render. Jednak chciałabym też zapytać czy czegoś takiego jak taki wynikowy obiekt nie można zainicjalizować w konstruktorze - wówczas byłoby to jeden raz na cykl życia. Ewentualnie jakieś inne pomysły?