Можно ли передать React.hook функции?

Как гласит правило, хуки могут вызываться только в верхней части функционального компонента и не должны вызываться условно, поэтому, хотя технически вы можете передать их как аргумент функции, но тогда вам нужно будет немедленно выполнить функцию.

Так

const App = () => {
    const [X, setX] = React.useState('x');

    function Y(useX){
       useX('string');
    }

    Y(React.useState);
    
    return <div>Hello {X}</div>
}

ReactDOM.render(<App/>, document.getElementById('app'));

<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 = "app" />

было бы хорошо.

Но ниже код не будет работать

const App = () => {
    const [X, setX] = React.useState('x');

    function Y(useX){
       useX('string');
    }
    
    
    return <div>Hello {X} <button onClick = {() => {Y(React.useState)}}>Click</button></div>
}

ReactDOM.render(<App/>, document.getElementById('app'));

<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 = "app" />

Следовательно, вы не должны использовать его таким образом, потому что может случиться так, что вы позже добавите некоторые операторы в вызовы функций, и, следовательно, хук не сохраняет порядок своего вызова.

Поддержание порядка вызова хуков требуется, потому что React полагается на порядок вызова хуков, чтобы поддерживать очередь хуков, используемых в методе, и обрабатывать все дальнейшие обновления.

Technically if useX is a custom hook, it essentially a function that is invoked from within a component that contains hooks at the top level

В этом случае передается не хук, а сеттер, ограничения хука не применимы к Y(setX). Он не обязательно должен находиться в области действия компонента:

function  Y(setX){
  setX('string');
}

const Comp = () => {
  const [X, setX] = useState('');
  Y(setX);
  ...
}

В зависимости от использования он может выиграть от мемоизации, например, если () => Y(setX) следует передать как опору:

const Comp = () => {
  const [X, setX] = useState('');
  const setY = useCallback(() => Y(setX), []);
  ...
}

При использовании хуков необходимо соблюдать определенный правила хука (на данный момент их всего два):

1. Вызывать хуки только на верхнем уровне
2. Вызывать хуки только из функций React

Пытаясь передать хук обычной функции вы нарушаете их оба. И хотя эти правила являются скорее соглашениями, чем фактическими ограничениями, и могут работать (как упоминали другие в этой теме) в некоторых случаях (либо вы знаете, где и почему вы можете их использовать, либо вы случайно выполняете требования к их использованию) это не рекомендуется, чтобы использовать их таким образом. Например, через какое-то время вы можете забыть, что ваша функция содержит ловушку и на самом деле зависит от того, где и как она объявлена ​​и используется, и перемещаете ее или помещаете в условное выражение, фактически нарушая логику вашего приложения.

Это настолько важно, что ребята из React придумали специальный Плагин ESlint, который предназначен для анализа вашего кода в фоновом режиме и точно предупреждает вас, когда вы близки к нарушению правил ловушки. Это способ узнать наверняка.

Если вам все еще нужно извлечь некоторую логику, зависящую от хука, из вашего компонента в отдельную функцию, рассмотрите возможность создания пользовательский крючок.

НО!

В вашем примере кода вы не проходят крючок выполняете функцию. React.useState — это крючок, а setX, который он возвращает, — нет. Вы можете пройти это вокруг, как вам нравится, и вы на самом деле предназначены для его прохождения к своим обычным функциям или кастомным хукам!