Renderer - is it normal?

Question

React

Is it normal that every time the onSubmit event on a stateless form component is called, its renderer is called? After all, its appearance does not change from the incoming data from onSubmit.
By rerender, I mean that the console.log() function called from jsx is called.

import React from 'react';


const sendLoginDataHandler = (props, event) => {
    event.preventDefault();

    let target = event.target;

    const loginData = {
        email:target.querySelector('input[name="email"]').value,
        password:target.querySelector('input[name="password"]').value,
    };
    props.sendLoginData(loginData);
};


const Form = (props) => (
    <form action="" onSubmit={sendLoginDataHandler.bind(null,props)}>
        {console.log(props.authSending)}
        <input
            type="text"
            placeholder="login"
            name="email"
            value={props.login}
            onChange={(e) => {props.changeLogin(e.target.value)}}
        />
        <input
            onChange={(e) => {props.changePassword(e.target.value)}}
            type="text"
            name="password"
            value={props.password}
            placeholder="password"
        />
        <button
            disabled={ props.authSending === 'requested' ? 1 : 0}
            type="submit"
        >
            Залогиниться
        </button>
    </form>
);

export default Form;

Answer 1

The redraw only fires because the redraw of the parent component fires. If the parent is React.Component, then its redraws can be controlled using the shouldComponentUpdate method.

Answer 2

Abnormal. Also, in React versions prior to 16.6, there are no redraw controls for functional components.
In the component class, there are two options for solving the issue: inherit from PureComponent, or implement shouldComponentUpdate. PureComponent should only be used when the props/state structure is flat