Question

0

146

Views

React Custom Hook function keeps recalling

According to the thread below,

useCustomHook being called on every render - is something wrong with this

It says it is completely normal to keep calling the custom hook function every time React re-renders.

My questions are, if it affects on a performance side when returning an array from this Custom Hook function( Not when fetching API and receiving data ) which contains a lot of values.

If so, how to prevent it ( How to let this Custom Hook function run only once )?

Here is my Custom Hook code, it returns an array which contains around 5000 string values.

function FetchWords(url: string) {
  const [data, setData] = useState<string[]>([]);

  useEffect(() => {
    fetch(url)
      .then((words) => words.text())
      .then((textedWords) => {
        setData(textedWords.replace(/\r\n/g, "\n").split("\n"));
      });
  }, []);
  const expensiveData = useMemo(() => data, [data]);
  return expensiveData;
}

export default FetchWords;

My Main js

const wordLists: any[] = useFetch(
    "https://raw.githubusercontent.com/charlesreid1/five-letter-words/master/sgb-words.txt"
  );

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

If you are worried about bringing all this data at the same time, you can indicate from the backend that they send you a certain number of records and from the frontend you can manage them with the pagination.
the use of useMemo is superfluous.
the useEffect that you are using will only be rendered ONCE, that is, it will only call the 5,000 registers that you mention only once

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T03:09:10.627Z

CustomHooks should start with word use...
You don't need useMemo in your hook, simply return data state.
Your hook makes the fetch call only once, so no problem there as the effect has empty dependency, so it runs once after first render.
The hook stores the array of 5000 entries once in data state and returns the same reference each time your custom hook is called during component re-renders. There is no copy operation, so you don't need to worry about that.
If you only want to fetch 100 entries for example, then your backend needs to provide that api.

Hope this resolves your queries as it is not very clear what is your doubt.

0

146

React Custom Hook function keeps recalling

2 answers

0

0

Find remote jobs

Andres GPT