React Parent Input, only render onBlur, mouse outside textbox

user_15435022 0
Viewed 47

Everytime, I update/write a letter in Child Textbox component, all of Parent component renders. How do I make it so, component only rerenders when onBlur, or user leaves the textbox? Using MUI 5 .

Parent Component:

const ProductDashboard = () => {
     const [productName, setProductName] = useState<null | string>('');

  useEffect(() => {
    setIsLoading(true);
  }, [productName]);

  return (
      <ProductFilter

Child:

const ProductFilter = ({
  productName,
  setProductName,

  return (
    <Box>
      <TextField
        value={productNameValue}
        onChange={event => {
          onFeeNameChange(event.target.value);
        }}
      />
material-ui reactjs textfield
1 Answers

All you need is defaultValue prop and onBlur handler:

const ProductFilter = ({ defaultValue, onComplete }) => {
  return (
    <Box>
      <TextField
        defaultValue={defaultValue}
        onBlur={(e) => onComplete(e.target.value)}
      />
    </Box>
  );
};

Usage:

<ProductFilter defaultValue={productName} onComplete={setProductName} />

Working example

user_49802150
Related