If you put the helper function inside the component function, everytime the component function gets executed, it will create a new instance of the helper function and after the function was executed the instance possibly gets garbage collected. So typically I would put it outside.

Of course there are exceptions, if you use an arrow function, you might need the lexical scope and therefor put it inside the component function, but if it's a pure function, I would say it should go outside.

With your first example, a new function object has to be created each time Foo runs. So that's memory churn you don't need unless the JavaScript engine can optimize it out. (Like almost all performance concerns, of course, it's the kind of thing to worry about when you have a performance problem. Although if you're doing this in a lot of small components, it can add up.)

Depending on what helper needs, you could define it outside your SFC and just use it within it.

// I'm assuming this is in a module, so it's not a global
const helper = () => {
    doSomething()
}

const Foo = () => {
    // Presumably you use `helper` here somewhere
    return (<View />)
}

If for some reason you're not using modules (!!), to avoid helper being global, you'd do the usual scoping thing. Perhaps:

const Foo = (() => {
    const helper = () => {
        doSomething()
    }

    return () => {
        // Presumably you use `helper` here somewhere
        return (<View />)
    }
})()

Quick note: You are importing a class, you can't call properties on a class unless they are static properties. Read more about classes here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

There's an easy way to do this, though. If you are making helper functions, you should instead make a file that exports functions like this:

export function HelloChandu() {

}

export function HelloTester() {

}

Then import them like so:

import { HelloChandu } from './helpers'

or...

import functions from './helpers' then functions.HelloChandu

IMHO, put helpers outside. Your cons are not cons

• If a helper is specific to a component, then it is not a helper.
• The DRY principle refers to repeating logic rather than data

The real performance benefit comes to play when you pass the function as prop to a child. Like this

const AddComponent = ({num1, num2}) => {
  const sum = (a, b) => a + b;
  return <Sum calculate={sum}>
}

Now the Sum component renders each time together with the parent. By moving the function outside the component it doesn't anymore. So if the child is complex you may have a considerable performance benefit.

Edit: as mentioned correctly below the child component always re-renders when the parent re-renders. So to get the performance benefit described above the child component needs to be wrapped in React.memo like this

React.memo(Sum)

When you're defining a function like this

const func = () => {};

You're creating a new variable.

const createFunc = () => {
  const func = () => {};
  return func;
}
createFunc() !== createFunc();

This means that every time you create a new function during rendering, it's a new function, different from the previous one. This can mess up some checks, like the dependency arrays in hooks, or checks for React.memo components or PureComponent-s. That's why people use useCallback if a function is in the component body.

You have to use the useFetch hook in the main render function. You can't use it inside of another function. You'll need to adjust your useFetch to work separately.

Here's an example of how to do that. In this case, I'm making the useFetch refetch when the url or options change

helper.js

import { useState, useEffect } from 'react';

export const GH_BASE_URL = 'https://api.github.com/';

export const useFetch = (url, options) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Set up aborting
    const controller = new AbortController();
    const signal = controller.signal;
    const fetchData = async () => {
      setIsLoading(true);

      try {
        const res = await fetch(url, { ...options, signal });
        const json = await res.json();
        setResponse(json);
        setIsLoading(false);
      } catch (error) {
        // AbortError means that the fetch was cancelled, so no need to set error
        if (error.name !== 'AbortError') {
          setError(error);
        }
      }
    };

    if (url) {
      fetchData();
    }
    // Clear up the fetch by aborting the old one
    // That way there's no race condition issues here
    return () => {
      controller.abort();
    };
    // url and options need to be in the effect's dependency array
  }, [url, options]);

  return { response, error, isLoading };
};

Header.js

import React, { useState } from 'react';
import { useFetch, GH_BASE_URL } from '../helpers';

const REPO_SEARCH_URL = `${GH_BASE_URL}/search/repositories?q=`;

function Header(props) {
  const [searchValue, setSearchValue] = useState('');

  
  function handleChange(event) {
    this.setState({ searchValue: event.target.value });
  }

  // Instead of using the search directly, wait for submission to set it
  const [searchDebounce,setSearchDebounce] = useState('');
  
  async function handleSearch(event) {
    event.preventDefault();
    setSearchDebounce(searchValue);
  }
  // If you want to include the options, you should memoize it, otherwise the fetch will re-run on every render and it'll cause an infinite loop.
  // This will refetch everytime searchDebounce is changed
  const { response, error, isLoading } = useFetch(
    searchDebounce?`${REPO_SEARCH_URL}${searchDebounce}`:''
  );

  return (
    <header>
      <form onSubmit={handleSearch} className="container">
        <input
          value={searchValue}
          onChange={handleChange}
          className="search-input"
          placeholder="Search a repository"
        ></input>
      </form>
    </header>
  );
}

export default Header;

If you want to run a function whenever the response changes, you could use an effect:

  useEffect(() => {
    if (error || isLoading) {
      return;
    }
    // Destructure this to prevent a deps issue on the hooks eslint config
    const { responseChanged } = props;
    responseChanged(response);
  }, [response, isLoading, error, props.responseChanged]);