Should reducing functions be created outside or inside my React component?

Asked

Viewed 39 times

4

Looking at the documentation of hook useReducer, I checked that the reducing function is created out of of the component:

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Is there any advantage/disadvantage in using the reductive function outside of the component statement in comparison to using within the component?

Example:

function Counter() {
  const initialState = { count: 0 };

  const reducer = (state, action) => {
    switch (action.type) {
      case "increment":
        return { count: state.count + 1 };
      case "decrement":
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  };
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}
javascript react function
  • 1

    This code is created outside, but, has a point all components can use, and in this case it does not matter because the rule is clear where the whole tree has the possibility to use this code, ie is available,.

1 answer

2


Is there any advantage/disadvantage in using the reductive function outside of the component statement in comparison to using within the component?

Yes. It is more advantageous to declare them outside the component. Not only reducing functions, but any function should ideally be declared out of of the component.

This is because, since React components are nothing more than Javascript functions, whenever React renders (or re-renders) a component, a new call occurs to the component function.

Thus, how the component function will be called for each rendering, everything inside the function will be created again. I explained a little better about this Javascript behavior here.

Therefore, it is advantageous to define any function out of of the component to avoid recreations of functions (and even objects) unnecessarily.

Of course, this is not always possible, since eventually functions may need some property that the component receives. In these situations, some paths can be taken:

  1. Make the function (declared out of component) accept any argument by which the property will be passed to the function;
  2. Declare the function within of the component while avoiding unnecessary recreations using the hook useCallback, that memoiza the function passed and only creates it again by changing some value passed to the dependencies array of the hook. The cost of this is that memoization may entail an additional cost of memory for the customer.

Note that React also provides a hook to memoize more generic objects, the useMemo.

Browser other questions tagged javascript react function

You are not signed in. Login or sign up in order to post.