Avoid unnecessary re-renders of FastTrack widgets

React checks the values of the widget props when deciding whether to re-render FastTrack widgets when application state changes. If a prop value for a widget has changed, React will re-render that widget in the UI.

Widgets that have props with callback functions as values may experience unnecessary re-renders. This is because callback functions are JavaScript objects, and React recognizes changes in object references as prop changes even when the content of those functions has not changed.

You can avoid unnecessary re-renders by using the useCallback hook when defining callback functions (for example, event handlers) that are passed into widgets as props. The useCallback hook caches function values, which avoids unnecessary re-renders.

Example code

import React from 'react'
import { useContext, useCallback } from "react";
import { MarkLogicContext, SearchBox, ResultsSnippet } from "ml-fasttrack";
function App() { 
  const context = useContext(MarkLogicContext);
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
  const handleResultClick = useCallback((result) => {
    console.log('URI clicked:', result?.uri)
  ), []);
  return (
    <>
      <SearchBox onSearch={handleSearch} />
      <ResultsSnippet
        results={context.searchResponse?.results}
        onClick={handleResultClick}
      />
    </>
  );
};
export default App;

In this code, the ResultsSnippet widget will only update when context.searchResponse?.results changes. This is because the useCallback hook caches the handleResultClick callback function, so that the function will never be recognized as having changed. (An empty dependency array is used as the second argument since the callback function does not depend on any external state.)

If handleResultClick was not wrapped in the useCallback hook, the ResultsSnippet may re-render unnecessarily with changes in the context state.

For more information, see the React documentation for the useCallback hook.