CODEWITHSUNDEEP
reactjsreact-hooks
cbdeveloper
cbdeveloper

Reputation: 31365

Import function vs turning it into custom hook

I have this ProductSearchContainer.js file that it's getting too long to handle and maintain.

What it's responsible for:

The file was getting too big (600+ lines) and I decide to move some pieces of logic to other files.

For each filter category (brand, price, rating, etc) I have two functions:

Note: You'll see below that they rely on state variable activePriceFilters but they don't call any React Hook in their execution.

OPTION #1

My 1st thought was to turn into a custom hook. So I did. And it works (see snippet below).

function usePriceFilter(activePriceFilters) {

  function applyPriceFilter(list, activePriceFilters) {
    console.log('I will get a list and return it filtered by activePriceFilters');
  }

  function simulateNextPriceFilter(list, someTestPriceFilter) {
    console.log('I will get a list and return the length of the filtered list by price');
  }

  return [applyPriceFilter,simulateNextPriceFilter];

}

And I consume by doing:

const [applyPriceFilter,simulateNextPriceFilter] = usePriceFilter(activePriceFilters)

I mean, my custom hook is basically a higher order function but I think it still qualifies as a custom hook:

From React DOCS:

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.

OPTION #2

But I guess I could also turn into a regular .js file, export both functions and just do the regular import on them. Like:

import {applyPriceFilter,simulateNextPriceFilter} from './priceFilterHelpers

QUESTION:

Is there a difference in functionaly or performance between the 2 approaches? Should I favor 1 instead of the other?

I think that the custom hook's is more readable, but is there anything else I'm gaining by doing this?

function App() {

  const [activePriceFilters,setActivePriceFilters] = React.useState(['10to20','50+']);

  const [applyPriceFilter, simulateNextPriceFilter] = usePriceFilter(activePriceFilters);

  return(
    <React.Fragment>
      <button onClick={applyPriceFilter}>Apply Price Filters</button>
      <button onClick={simulateNextPriceFilter}>Simulate Price Filter</button>
    </React.Fragment>
  );

}

function usePriceFilter(activePriceFilters) {

  function applyPriceFilter(list, activePriceFilters) {
    console.log('I will get a list and return it filtered by activePriceFilters');
  }

  function simulateNextPriceFilter(list, someTestPriceFilter) {
    console.log('I will get a list and return the length of the filtered list by price');
  }

  return [applyPriceFilter,simulateNextPriceFilter];

}


ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"/>

Upvotes: 1

Views: 1059

Answers (1)

pteranobyte
pteranobyte

Reputation: 594

Your option #2 would perform better, in theory, because you would (probably) write it such that those two functions only need to be instantiated once. In the custom hook version, the two functions, and the array that holds them, will be created on every render.

However, unless your case is much, much, more computationally intensive than your examples let on, the difference would almost certainly be negligible.

So it's really down to what kind of code you and the readers of your code find more legible. I personally fall on the side of the hooks.

Upvotes: 2

Related Questions