Questions & Answers

I need to check the fields and i need to pass several properties to the button. String, Object, Array, Func and i need usestate be an object like example. Any solution to not cause re-rendering?

EDIT: I need to do a way that when the user fills in the input the button does not re-render.

EDIT 2: when I use the primitive type useState(string). And I make the comparison works , useState of type Object making comparison causes re-rendering on button:

code below does not cause re-rendering

  const [email, setEmail] = useState("");


  const validateFields = useCallback(() => {
    if (email === "") {
      alert("Empty e-mail.");

      return false;
    }

    return true;
  }, [email]);

code below does CAUSE re-rendering - (comparison with object)

 const [userData, setUserData] = useState({
    email: "",
    password: ""
  });

  const validateFields = useCallback(() => {
    if (userData.email === "") {
      alert("Empty e-mail.");

      return false;
    }

    return true;
  }, [userData]);

project link : https://codesandbox.io/s/tender-allen-tfklv8?file=/src/components/Button.js

import { useCallback, useState } from "react";
import Button from "./components/Button";
import "./styles.css";

export default function App() {
  const [userData, setUserData] = useState({
    email: "",
    password: ""
  });

  const validateFields = useCallback(() => {
    if (userData.email.trim() === "") {
      alert("Empty e-mail.");

      return false;
    }

    return true;
  }, [userData]);

  const handleAPI = useCallback(() => {
    if (validateFields()) {
      console.log("handleAPI");
    }
  }, [validateFields]);

  return (
    <div className="App">
      <input
        value={userData.email}
        onChange={(event) =>
          setUserData((prev) => ({
            ...prev,
            email: event.target.value
          }))
        }
      />
      <Button onClick={handleAPI} />
    </div>
  );
}



const Button = ({ onClick }) => {
  console.log("------------Button render---------------");

  return <button onClick={onClick}>BUTTON DEFAULT</button>;
};

export default memo(Button);