Fem enkla tips kring state som du bör kunna som React utvecklare

Vi listar några enkla grundregler nedan som bör hjälpa dig att resonera och ta vettiga beslut i ditt befintliga eller nästa React projekt. Vi på Will & Skill jobbar konstant med att förenkla och förbättra inlärningsprocessen för våra kollegor i branschen.

Här kommer fem enkla tips kring hur du bör resonera och tänka när du sätter upp din React applikation.

1. Undvik Redux om det inte behövs

Redux har under en längre period varit det hetaste biblioteket för att hantera state men ofta bidrar det till att addera mer komplexitet till ett projekt om man inte förstår vad Redux bidrar med.

Om du läser om Redux så ser du att vissa fördelar diskuteras ofta

• Att "Predictable State Updates" gör det enklare att förstå hur data flödar och uppdateras i en app

• Användningen av "Pure Reducer Functions" gör att logiken blir enklare att testa och möjliggör saker som "time-travel debugging".

• Centraliserat state gör det enklare att implementera saker och ting som loggning av data samt "persisting state" mellan sidladdningar

Tre enkla frågor du kan ställa dig själv innan du använder Redux

1. Är det värt för mig att använda Redux med tanke på projektets storlek?

2. Kommer jag att behöva använda Redux "time travel debugging" i min app?

3. Behöver jag passa ner props i flera nivåer i mina komponenter på flertalet platser i min app?

2. Håll state i "Containers"

Ett vanligt förekommande fel är att man sprider ut state på olika platser i applikationen. Detta medför tyvärr mer komplexitet speciellt när projektet växer.

Ett smart sätt att tänka kring state är att hålla dem strikt till så kallade "Container" komponenter. Dessa komponenter har all logik för att hämta, uppdatera och radera data genom olika funktionsanrop i den så kallade "Container" komponenten.

Om du behöver dela data och/eller events mellan komponenter kan du skicka ner andra komponenter som renderas ut som t ex <div>{props.children ...props}</div> av Container-komponenten.

3. Använd Context ifall det inte räcker med att hålla state i Containers på ett meningsfullt sätt

En viktig grundregel är att Context enbart bör användas när du har fler komponenter som behöver dela samma data. Ifall du inte behöver dela data så kan du använda dig utav Containers enligt punkt 2 ovan eller kika på artikeln Composition vs Inheritance i Reacts dokumentation

Läs mer om Context här

4. Använd enbart "Stateful Components" där det behövs

Ibland stöter man på exempel där utvecklare använder sig utav sk "Stateful Components" när det inte behövs. Kika på nedanstående exempel.

Javascript// BAD

import React, { Component } from "react";

class StatefulComponent extends Component {
  state = {name: "Bugs Bunny"}
	
	componentDidMount () {
		// Do something here
	}
	
	render () {
	  return (<div>
			<p>I am a component with state but I am not using my state.</p>
		</div>);
	}
}

export default StatefulComponent;

Ovanstående exempel kan skrivas om enligt exemplet nedan. I ovanstående komponent så definierar vi state men det används inte. I nedanstående komponent så har vi mycket mindre kod och vi förstår väldigt fort vad syftet med komponenten är.

Javascript// GOOD

import React from "react";

const StatelessComponent = props => {
	return (<div>
		<p>I am component without state.</p>
	</div>);
}

export default StatefulComponent;

5. Använd "PureComponent" så mycket som det går

Oftast så kan det vara så att alla ändringar som sker i en föräldrakomponent inte påverkar barnkomponenter då data sällan ändras hos alla barnkomponenter. Ifall detta förekommer i ditt projekt så bör du helst använda dig utav PureComponent komponenten som ingår i React.

Läs mer om PureComponent i Reacts dokumentation.