How do I display an alert only once on page load in React?

Below is one correct approach: move the alert call out of the render method and into a lifecycle method that runs only once (or under controlled conditions). In React 16 you can safely use componentDidMount for one‐time actions.

For example:

JAVASCRIPTCopied
export default class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showTotals: true,
    };
  }

  componentDidMount() {
    // You can get total_values and contract_total from props/state or via other means.
    if (this.state.showTotals && total_values > contract_total && showModals) {
      swal('', 'Total is greater than ... ', 'error');
      // After showing the alert, update the flag so it doesn’t show again.
      this.setState({ showTotals: false });
    }
  }

  handleDelActClick = (row, id) => {
    // For delete action do what you need and you can update the state if needed.
    // Note: The alert in componentDidMount will not repeat.
    this.delItem(row.id, id);
  };

  render() {
    return (
      <div>
        {/* Other UI elements */}
        <Button onClick={() => this.handleDelActClick(row, rowId)}>
          <i>delete</i>
        </Button>
      </div>
    );
  }
}

Explanation

• Using componentDidMount:
  By placing the alert logic inside componentDidMount, it runs only once after the component mounts, rather than on every render. This prevents the alert from re-triggering during subsequent renders (like when using modals or other actions).

• Updating the state flag:
  We set showTotals to false immediately after calling swal. This ensures that even if for any reason the alert logic is re-invoked, the flag prevents another alert.

• Avoiding alerts in render:
  Calling side effects (like alerts) in the render method is discouraged. Render should be pure and only convert state/props into UI.

With this approach, you only see the alert when the page/component loads, and subsequent actions such as delete, add, or edit won’t re-trigger the alert.