title: React: Is it okay if useCallback returns a value, or is this a bad pattern?
body: <p>I have a function called <code>filterContactsByValue</code>. It is curried and takes in a value and a list of contacts and then filters the list based on the value and returns the (new) filtered list.</p>
  
  <p>Since the list is often large (10.000+ entries), the web app should run on smartphones and the filter takes into account many values, I want to optimize the computing resources. Therefore I use <a href="https://github.com/xnimorz/use-debounce" rel="noreferrer"><code>useDebounce</code></a> to not compute unnecessarily.</p>
  
  <p>I also used <code>useCallback</code> like this to memoize the computation of the <code>filteredContacts</code>:</p>
  
  <pre><code>function FilteredContacts({contacts}) {
    const [filterParam, setFilterParam] = useState('');
    const [value] = useDebounce(filterParam, 800);
    const filterContacts = filterContactsByValue(value.toLowerCase());
  
    // Is this okay?  ...
    const getFilteredContacts = useCallback(() =&gt; filterContacts(contacts), [
      value
    ]);
  
    return (
      &lt;div className="main"&gt;
        &lt;SearchBar
          value={filterParam}
          onChangeText={setFilterParam}
        /&gt;
        // ... and then this? 
        &lt;ContactList contacts={getFilteredContacts()} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I was wondering whether this is okay, or if returning values like this is bad practice. If it is bad, why and how would you improve it?</p>
  
  <p><strong>Edit:</strong>
  The <code>filterContactsByValue</code> function:</p>
  
  <pre><code>import { any, filter, includes, map, pick, pipe, toLower, values } from 'ramda';
  import { stringFields } from './config/constants';
  
  const contactIncludesValue = value =&gt;
    pipe(
      pick(stringFields),
      map(toLower),
      values,
      any(includes(value))
    );
  
  const filterContactsByValue = pipe(
    contactIncludesValue,
    filter
  );
  </code></pre>