javascript.react.correctness.hooks.set-state-no-op.calling-set-state-on-current-state

profile photo of semgrepsemgrep
Author
unknown
Download Count*
LGPL Commons Clause
License

Calling setState on the current state is always a no-op. Did you mean to change the state like $Y(!$X) instead?

Run Locally

Run in CI

Semgrep CI docs

Defintion

Edit RuleView Source
Open in Playground 
rules:
  - id: calling-set-state-on-current-state
    patterns:
      - pattern: $Y($X);
      - pattern-inside: |
          const [$X, $Y] = useState(...);
          ...
    message: Calling setState on the current state is always a no-op. Did you mean
      to change the state like $Y(!$X) instead?
    languages:
      - javascript
    severity: ERROR
    metadata:
      technology:
        - react
      category: correctness
      license: Commons Clause License Condition v1.0[LGPL-2.1-only]

Examples

set-state-no-op.jsx

import { useState } from "react";
import styled from "styled-components";

const PolicyColumn = ({
  group,
  deck,
}) => {
  const [actionsExpanded, setActionsExpanded] = useState<boolean>(false);
  const [columnRef, setColumnRef] = useState<HTMLElement | null>(null);
  return (
    <ColumnContainer>
      <ColumnHeader>
        <Button
          small
          minimal
          onClick={() => {
            // ruleid:calling-set-state-on-current-state
            setActionsExpanded(actionsExpanded);
          }}
          intent={actionsExpanded ? Intent.PRIMARY : Intent.NONE}
        >
          <FontAwesomeIcon icon={faBell} />
        </Button>
        <Button
          small
          minimal
          onClick={() => {
            // ok
            setActionsExpanded(!actionsExpanded);
          }}
          intent={actionsExpanded ? Intent.PRIMARY : Intent.NONE}
        >
          <FontAwesomeIcon icon={faBell} />
        </Button>
      </ColumnHeader>
    </ColumnContainer>
  );
};

export default PolicyColumn;