Déstructurer les props pour optimiser son code - Formation Gutenberg

Il est parfois redondant de toujours commencer ses valeurs et fonctions par props ou props.attributes. On va alors voir comment simplifier notre code grâce à l’assignation déstructurée de ESNext.

Sommaire du cours

Rappel : L’assignation destructurée
Déstructurer les props
Déstructurer à la source

Vous en avez marre de toujours taper props.setAttributes() et props.attributes.maValeur dans votre code ? C’est vrai qu’on commence à en avoir pas mal écrit au cours de cette formation, mais heureusement on va maintenant optimiser tout ceci !

Rappel : L’assignation destructurée

Pour cela on va utiliser l’assignation déstructurée, que l’on a vue dans le cours sur les notions ESNext et React :

JSX

// Au lieu d'utiliser 
props.attributes.number
props.attributes.title
props.attributes.radius

// On pourra extraire
const { number, title, radius } = props.attributes

<RichText.Content
	value={ number }
/>

Si je reformule en français ce code j’obtiens : « je veux extraire number, title et radius de props.attributes afin de les utiliser en tant que variables autonomes ».

Le but de cette assignation est aussi de ne garder que ce que l’on a réellement besoin d’utiliser et de simplifier l’écriture de notre code.

Déstructurer les props

On va déstructurer les props fournies dans edit et dans save, et on va voir que l’on n’a pas besoin des mêmes valeurs dans l’un et l’autre.

Je reprend l’exemple du cours précédent, que j’ai nommé cette fois src/13-destructuration :

JSX

src/13-destructuration/save.js

export default function save( props ) {
	const blockProps = useBlockProps.save()

	// Déstructuration des props
	const { number, title, chapterSign, alignment, textColor, backgroundColor, withRadius, radius } = props.attributes
    
	return (
		<div { …blockProps }
			style={ {
				borderRadius: withRadius && radius, // C'est tout de suite plus léger
				backgroundColor: backgroundColor,
				textAlign: alignment,
			} }
		>
			<p
				className="first-line"
				style={ { color: textColor } }
			>
				<RichText.Content
					tagName="span"
					className="sign"
					value={ chapterSign }
				/>
				<RichText.Content
					tagName="span"
					className="number"
					value={ number }
				/>
			</p>
			<RichText.Content
				tagName="h2"
				className="title"
				value={ title }
			/>
		</div>
	)
}

Dans la méthode save, on veut récupérer tous nos attributs.

Le but est d’éviter de les appeler à chaque fois props.attributes.monAttribut et simplement utiliser monAttribut (qui peut-être dans cet exemple number, title, chapterSign…).

Je regarde maintenant sur l’assignation du edit : on cherche à extraire les fonctions utilisées comme setAttributes, className (la classe du bloc) et isSelected (en réalité pas utiles ici, il ne sont là que pour l’exemple).

Mais on veut également extraire les attributs de props. On pourrait du coup le faire en deux fois avec une nouvelle ligne :

JSX

src/13-destructuration/edit.js

const { attributes, setAttributes, className, isSelected } = props
const { number, title, chapterSign, alignment, textColor, backgroundColor, withRadius, radius } = attributes

Sinon on peut le faire en une seule ligne en créant un sous-objet attributes :

JSX

src/13-destructuration/edit.js

const { 
  attributes: { number, title, chapterSign, alignment, textColor, backgroundColor, withRadius, radius }, 
  setAttributes, className, isSelected } = props

Du coup désormais il suffit d’écrire setAttributes() au lieu de props.setAttributes()et radius au lieu de props.attributes.radius. Propre non ?

Vous noterez qu’en général je n’ai besoin d’envoyer que les attributs dans le save, et pas les fonctions comme setAttributes ou isSelected qui n’ont une utilité que dans edit.

Déstructurer à la source

Une dernière chose, mais là c’est vraiment pour aller au bout du délire. On peut faire l’assignation directement lorsque les props sont passées en paramètre du edit ou du save.

JSX

// Au lieu de 
export default function Edit( props ) {
  const { setAttributes, isSelected } = props
}

// On peut écrire 
export default function Edit( { setAttributes, isSelected } ) {
}

Là on dit clairement que, des props, je ne veux conserver que cette sélection : pas la peine de m’envoyer le reste. Du coup dans le code on ne voit plus aucune mention à ces props. Ca peut être déroutant au début.

C’est par contre une écriture qui peut s’avérer très vite lourde, à utiliser donc avec des pincettes.

Conseil

À vous de choisir l’écriture qui vous plait le mieux. Aucune n’est mauvaise. Optez donc pour celle qui vous parait la plus claire. l’essentiel étant que vous vous y retrouviez dans votre code !

Personnellement j’aime bien parfois garder la notation originale, quitte à retaper props à chaque fois, ça me rappelle que l’élément vient du parent (dans notre cas, Gutenberg).

Cette technique est largement utilisée par les développeurs JS. Elle va d’ailleurs nous être utile dans le cours suivant où on va scinder notre code en plusieurs sous-composants.

On fera appel à cette écriture pour éviter de passer toutes les props à chaque sous-composant, et juste ce dont il a besoin, par mesure de performances.