5 erros comuns ao criar componentes React (com ganchos) em 2020

Olá! Neste artigo, você aprenderá sobre os erros mais comuns ao criar componentes do React, bem como por que eles são considerados erros, como evitá-los ou corrigi-los.

, dev.to. Quarkly .

React

React -, . api/concept React- .

, , React, , , React', - .

, , , . , , , , .

, , . . , , , , - . , , , .

React-, , . , , — , . , .

1. useState,

React’ — . . , , , , .

useState , React’. , .

: , , — , . . .

:

function ClickButton(props) {
  const [count, setCount] = useState(0);

  const onClickCount = () => {
    setCount((c) => c + 1);
  };

  const onClickRequest = () => {
    apiCall(count);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

:

, : , , ? ? : , . React’ , , , .

, , , , . .

:

, , , useRef. , .

function ClickButton(props) {
  const count = useRef(0);

  const onClickCount = () => {
    count.current++;
  };

  const onClickRequest = () => {
    apiCall(count.current);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

2. router.push

, React’, , React-.

, , . SPA, . - . React — react-router, .

, ?

:

function ClickButton(props) {
  const history = useHistory();

  const onClick = () => {
    history.push('/next-page');
  };

  return <button onClick={onClick}>Go to next page</button>;
}

:

, : , -. , , . ? , .

:

, , <Link> <a>.

function ClickButton(props) {
  return (
    <Link to="/next-page">
      <span>Go to next page</span>
    </Link>
  );
}

: !

3. useEffect

, React’, — useEffect. , prop state. , , - .

, DOM. , onSuccess, .

:

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = useCallback(() => {
    setLoading(true);
    callApi()
      .then((res) => setData(res))
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  useEffect(() => {
    if (!loading && !error && data) {
      onSuccess();
    }
  }, [loading, error, data, onSuccess]);

  return <div>Data: {data}</div>;
}

:

useEffect: API , onSuccess. , , , . , ?

, . . 100% , , fetch . , , , .

:

— onSuccess , .

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = useCallback(() => {
    setLoading(true);
    callApi()
      .then((fetchedData) => {
        setData(fetchedData);
        onSuccess();
      })
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, [onSuccess]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return <div>{data}</div>;
}

, onSuccess API.

4.

. ? ? , . .

, , ( isMobile, ).

:

function Header(props) {
  return (
    <header>
      <HeaderInner menuItems={menuItems} />
    </header>
  );
}

function HeaderInner({ menuItems }) {
  return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

:

HeaderInner . , . .

:

, , , : , -, .

function Header(props) {
  return (
    <header>{isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}</header>
  );
}

5. useEffect

, componentWillReceiveProps componentDidUpdate React-? , useEffect , .

, useEffect , . , , , (breadcrumbs) ( react-router ).

:

function Example(props) {
  const location = useLocation();

  const fetchData = useCallback(() => {
    /*  Calling the api */
  }, []);

  const updateBreadcrumbs = useCallback(() => {
    /* Updating the breadcrumbs*/
  }, []);

  useEffect(() => {
    fetchData();
    updateBreadcrumbs();
  }, [location.pathname, fetchData, updateBreadcrumbs]);

  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

:

: « » (data-fetching) « » (displaying breadcrumbs). useEffect. useEffect , fetchData updateBreadcrumbs location. , fetchData location. , .

:

, , , .

function Example(props) {
  const location = useLocation();

  const updateBreadcrumbs = useCallback(() => {
    /* Updating the breadcrumbs*/
  }, []);

  useEffect(() => {
    updateBreadcrumbs();
  }, [location.pathname, updateBreadcrumbs]);

  const fetchData = useCallback(() => {
    /*  Calling the api */
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

: .

React- . , , , , . , - . 100%.

, — , .