rspec/rules/S6443/javascript/rule.adoc

== Why is this an issue?

React components have a built-in `state` data. This data is used to store component property values. When `state` changes, the component is re-rendered. For functional components to manage `state`, React provides the `useState` hook, which returns the state value and a setter function to update its value.

When the setter function is called with the state variable as a parameter, nothing will happen. This can happen by mistake when attempting to reset a default value or invert a boolean, among others.

This rule raises an issue when calling the setter function with the state variable provided by the same `useState` React hook.

=== Noncompliant code example

[source,javascript]
----
import { useState } from "react";

function ShowLanguage() {
    const [language, setLanguage] = useState("fr-FR");
    return (
      <section>
        <h1>Your language is {language}!</h1>
        <button onClick={() => setLanguage(navigator.language)}>Detect language</button>
        <button onClick={() => setLanguage(language)}>Je préfère le Français</button>{/* Non compliant: This button does nothing */}
      </section>
    );
};
----

=== Compliant solution

[source,javascript]
----
import { useState } from "react";

function ShowLanguage() {
    const [language, setLanguage] = useState("fr-FR");
    return (
      <section>
        <h1>Your language is {language}!</h1>
        <button onClick={() => setLanguage(navigator.language)}>Detect language</button>
        <button onClick={() => setLanguage("fr-FR")}>Je préfère le Français</button>
      </section>
    );
};
----