DEV Community: Yacine C

React - Manage many state updates

Yacine C — Tue, 18 Apr 2023 11:00:22 +0000

Managing multiple states can rapidly become a complex task.

In effect, it can create some synchronous problems. Let’s say you have this component:

const MyComponent = () => {
    const [users, setUsers] = useState<User[]>([]);
    const [loading, setLoading] = useState<boolean>(false);

    const handleClick = () => {
    setLoading(true);

    someMethod()
            .then((newUsers) => {
          setUsers(newUsers);
          setLoading(false);
        });
  };

    return loading ? (<Loader />) : (<button onClick={handleClick}>Update</button>);
};

The code is currently working. However, as it becomes more complex and has more states, you may encounter issues with its values and component refreshing.

To avoid this kind of behavior, you can store all your data in the same object.

const MyComponent = () => {
    const [object, setObject] = useState({
        loading: false,
        users: []
    });

    const handleClick = () => {
    setObject({...object, loading: true});

    someMethod()
            .then((newUsers) => {
          setObject({...object, users: newUsers, loading: false});
        });
  };

    return loading ? (<Loader />) : (<button onClick={handleClick}>Update</button>);
};

In this case, that's totally fine because our object is pretty simple. However, if we have to deal with more states, it's better to use a reducer to externalize the object updates.

const reducer = (state, action) => {
    switch(action.type) {
        case "start":
                return {...state, loading: true}
        case "end":
                return {...state, users: action.newUsers, loading: false}
    }
}

const App = () => {
    const [object, dispatch] = useReducer(reducer, {
        loading: false,
        users: []
    });

    const handleClick = () => {
    dispatch({type: "start"});
    someMethod()
            .then((newUsers) => {
            dispatch({type: "end", newUsers});
        });
  };

    return object.loading ? 
        (<Loader />) : 
        (<div><button onClick={handleClick}>Update</button></div>);

};

Now you can be sure that all your states will be synchronized, and you have total control over them.

Why use git cherry-pick instead of git rebase

Yacine C — Wed, 12 Apr 2023 14:40:19 +0000

Debugging can quickly become difficult when your rebase is significant. Fortunately, you can use cherry-pick to help you rebase your branch commit by commit.

Let's consider a practical example: you are developing on a branch named feature, and you need to rebase this branch onto main.

First, ensure that you are on the feature branch. Then, copy the commit hash that you want to apply to feature and use the following command:

git cherry-pick hash_from_main_branch

If the cherry-pick operation creates a conflict, you will need to resolve it. The advantage of this approach is that you can deal with a single commit and a smaller conflict. You know which commit created the conflict, making it easier to solve the problem.

React - Create a custom component from native HTML element with typescript

Yacine C — Tue, 11 Apr 2023 08:00:00 +0000

Sometimes we need to overload some native HTML tags with our own component.

Let’s take a simple example.

You need to create a Button component but you want your button to have a custom style. You’ll probably write something like :

interface ButtonProps {
    value: string;
}

const Button = (props: ButtonProps) => {
    return (
        <button className="myClass">{value}</button>
    )
}

This code is totally fine. However, what happens if you want to pass some native attributes to your button like the onClick method or the type? You’ll surely add props to your interface :

interface ButtonProps {
    value: string;
    type: string;
    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}

const Button = (props: ButtonProps) => {
    const {value, onClick, type} = props;
    return (
        <button 
            onClick={onClick} 
            type={type} 
            className="primary">
                {value}
        </button>
    );
}

Well, our code is still ok. Now, we also want to pass our classes dynamically to our component:

interface ButtonProps {
    value: string;
    type: string;
    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    className: string;
}

const Button = (props: ButtonProps) => {
    const {value, onClick, type, className} = props;
    return (
        <button 
            onClick={onClick}
            type={type}
            className={className}>
                {value}
        </button>
    );
}

const App = () => {
    return (
        <div>
            <Button 
                type="button"
                value="Submit"
                onClick={(e) => {console.log("Clicked!"}}
                className="primary"
             />
        </div>
    );
}

Do you see the problem with this approach? Each time we’ll need to use a native property of our button tag, we will need to add a property to our interface to be able to overload it in our component.

Fortunately, we can change our interface to avoid these repetitions :

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

export default function Button(props: ButtonProps) {
  return <button {...props}>{props.value}</button>;
}

In this way, you can pass all the previous props to your component without adding every attribute in your interface because it extends all the button tag native attributes :

<Button
    value='Submit'
    type='button'
    onClick={(e) => {
      console.log("submitted!");
    }}
    className='primary'
/>

Furthermore, a big advantage of this approach is that you can overload the attribute in your component in order to have more control :

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

export default function RadiusButton(props: ButtonProps) {
  // Here we overload the className and add our own class to the button
    return (
        <button {...props} className={`${props.className border-radius}`} >
            {props.value}
        </button>
    );
}

So next time you need to create a basic component with custom attributes, try to extend your component with native HTML Element attributes.

React - How to deal with SVG

Yacine C — Mon, 10 Apr 2023 08:00:00 +0000

Working with SVG in a React app can give you headaches!

Understanding how to effectively handle and use SVG files in our applications isn't always straightforward. In fact, there are only two distinct scenarios that one may come across.

SVG as a static image

One practical way to handle SVG files is by storing them in an assets folder and importing them like packages:

import MySVG from 'assets/homer-simpson.png';

const Component = () => {
    return (
        <img src={MySvg} alt='Homer Simpson' />
    )
}

SVG with dynamic properties

While the initial method of displaying your SVG is acceptable, there may be instances where you need to modify your SVG properties based on conditional variables and events.

In such cases, a more efficient approach is to create a separate component that solely handles the SVG and its property logic, making it easier to manage and update.

const MySVG = ({color}) => {
    return (
        <svg height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill={color} />
        </svg>
    );
}

const Component = () => {
    const [focused, setFocused] = useState(false);
    return (
            <button onClick={() => setActive((prev) => !prev)}>
                <MySVG color={focused ? "red" : "black"}/>
            </button>
    )
}

React - Pourquoi mon component ne se re-render pas

Yacine C — Sun, 09 Apr 2023 16:51:00 +0000

Quand on utilise React, il n’y a rien de pire qu’un component qui ne se re-render pas correctement. En général on essaye de rajouter des useEffect un peu partout pour forcer le refresh du component et que “cela fonctionne”. Cependant cette approche ne résout pas le vrai problème qui est très souvent engendré par un problème d’immutabilité de state.

Qu’est ce que l’immutabilité ?

Pour comprendre le principe d’immutabilité, il faut bien comprendre la différence entre les valeurs primitives et les valeurs complexes en Javascript.

Les valeurs primitives représentent les données qui ne sont ni des objets, ni des méthodes et ni des propriétés Javascript. Ils regroupent les types suivants : number, string, boolean, bigint, null, undefined et symbol.

On dit que les valeurs primitives sont immutables car elles ne peuvent pas être modifiées. En effet, si on écrit:

let size = 3;

La valeur 3 ne changera jamais. C’est important de ne pas confondre la primitive elle-même (ici 3) et la variable à laquelle on assigne la valeur (ici size), car on peut réassigner une nouvelle valeur à notre variable.

On peut alors se demander, que se passe-t-il lorsqu’on affecte une nouvelle valeur à notre variable ?

let size = 3;
size = 10;

Lorsque l'on créé une variable, on lui alloue un espace mémoire où on stockera sa valeur, on parle alors de référence. Sur la première ligne, on créé une variable, une référence lui est donc attribuée**, puis on l’initialise avec la valeur 3.

Sur la seconde ligne, on change simplement la valeur contenue dans l’espace mémoire alloué à la variable size.

Entre la 1ère et la 2ème ligne, on ne change donc pas la référence de notre variable mais seulement sa valeur.

Le principe est le même pour les valeurs complexes :

let fruits = ["apple", "banana", "strawberry"]
fruits.push("kiwi");

On commence d’abord par allouer un espace mémoire à notre variable fruits(référence), on lui affecte les valeurs “apple”, “banana” et “strawberry”.

Puis sur la seconde ligne on garde la même référence pour fruits, et on rajoute l’élément “kiwi” dans notre tableau.

Contrairement aux valeurs primitives, les valeurs complexes sont dites mutables. Elles ne sont pas fixes et peuvent être modifiées comme dans notre exemple avec le tableau.

Quel est le rapport avec nos components React 🤨

En React, on peut définir des states qui contiennent aussi bien des valeurs primitives que complexes :

const [firstName, setFirstName] = useState("Bob");
const [flower, setFlower] = useState({name: "tulip", color: "yellow" });

Prenons un exemple, on va écrire un component avec un state age qui contient un number. On affiche ce state dans une balise <p> et un bouton qui permet d’incrémenter la valeur du state de 1.

const App = () => {
    const [age, setAge] = useState(32);

    function handleClick(e) {
        age = age + 1;
        setAge(age);
    }

    return (
        <div>
            <p>{age} ans</p>
            <button onClick={handleClick}>Incrémenter</button>
        </div>
    )
}

Ce code vous semble correct ? Pourtant il ne l’est pas ! Si vous testez, vous vous rendrez compte que votre component ne se re-render pas.

Le problème c’est que React considère qu’un state a été modifié seulement si l’on modifie sa référence. On appelle ça une comparaison superficielle.

La méthode setAge récupère donc la référence de la valeur qu’on lui passe.

Ici, on modifie la valeur de age : age = age + 1, donc aucun refresh n’est effectué.

Puis on assigne la même référence à notre variable age : setAge(age), donc aucun re-render n’est effectué.

Il n’y a donc aucun changement détecté par React.

Pour pallier à ce problème, on écrira plutôt ceci :

function handleClick(e) {
        setAge(age + 1);
}

À la compilation, age + 1 va être calculé et stocké dans la mémoire. setAge récupèrera donc la référence qui contiendra le calcul de age + 1 (donc une valeur primitive). On dit alors que la valeur passée à setAge est immutable (car elle ne peut pas être modifiée).

Pour les valeurs primitives c’est donc assez simple, en revanche lorsqu’on utilise des valeurs complexes comme des objets ou des tableaux, comment faire pour passer une nouvelle référence à notre méthode ?

Un exemple vaut bien mieux que mille mots !

const App = () => {
    const [user, setUser] = useState({name: "Bob", age: 8});

    function handleClick(e) {
        user.age = user.age + 1;
        setUser(user);
    }

    return (
        <div>
            <p>{user.name} à {user.age} ans</p>
            <button onClick={handleClick}>Incrémenter</button>
        </div>
    )
}

Vous l’aurez deviné, ce code ne fonctionne pas. On retrouve le même problème que tout à l’heure, on modifie la valeur de la variable mais pas sa référence. Il n’y a donc pas de modification détectée par React et donc pas de re-render.

Pour résoudre ce problème, on va utiliser ce qu’on appelle la déstructuration avec l’opérateur spread …

function handleClick(e) {
        setUser({...user, age: user.age + 1});
    }

Lorsqu’on écrit {…user}, on crée un nouvel objet dans lequel on “déstructure” tous les champs contenus dans notre ancien objet user. Ce code est équivalent à : {name: user.name, age: user.age}

En revanche, on ne souhaite pas garder le même age, alors on redéfinit la propriété age juste après l’utilisation de …user

{...user, age: user.age + 1}

Même chose pour vos tableaux, on peut aussi utiliser le spread operator de la même façon :

const App = () => {
    const [myArray, setMyArray] = useState([]);

    function handleClick(e) {
        const newElement = // some code...

        setMyArray([...myArray, newElement]); // On ajoute le nouvel element au tableau
    }

    return (
        <div>
            <p>{myArray.join(", ")}</p>
            <button onClick={handleClick}>Ajouter</button>
        </div>
    )
}

En résumé

Si vous rencontrez un problème de re-render avec vos components, la meilleure approche sera d’abord investiguer du côté de vos states et de leur modification. Ce problème s’applique aussi à bien d’autres notions de React comme les contexts, les reducers etc.

Pour en savoir plus, n'hésitez pas à lire la documentation React