React custom hooks in callback

Question

I'm trying to use my custom hook inside the callback logic like this:

import React, { useEffect, useState } from 'react';
import useDataChange from '../../hooks/useDataChange';


const SomeComponent = () => {
  return (
    <Table
      handleTableChange={data => useDataChange(data)}
    />
  );
};


export default SomeComponent;

And my custom hooks (just to simplify) looks like that:

const useDataChange = data => {
  console.log(data);
};

export default useDataChange;

In short, custom hook supposed to be fired when data from table is changed (ie. when handleTableChange in Table component is fired). Instead I'm getting:

React Hook "useDataChange" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

How can I use it when table data is changed?

Answer 1

The key to understanding hooks is to extract pieces of react code out of components. So your first step would be to get it working inside the component

const SomeComponent = () => {
  const [data, setData] = useState([])

  return (
    <Table
      handleTableChange={setData}
    />
  );
};

Based on your code, I'm not seeing where you'd need a hook or side effect. But let's pretend that you do want to run some simple side effect:

const SomeComponent = () => {
  const [data, setData] = useState([])
  const [modifiedData, setModifiedData] = useState([])

  useEffect(() => {
    //here we're just going to save the current data stream into a new state variable for simplicity
    setModifiedData(data)
  }, [data])

  return (
    <Table
      handleTableChange={setData}
      data={modifiedData}
    />
  );
};

So now we have some logic that runs a side effect. Now you can extract it to its own hook.

const useModifiedData = (data) => {
  const [modifiedData, setModifiedData] = useState(data)

  useEffect(() => {
    setModifiedData(data)
  }, [data])

  return modifiedData
}

const SomeComponent = () => {
  const [data, setData] = useState([])

  const modifiedData = useModifiedData(data)

  return (
    <Table
      handleTableChange={setData}
      data={modifiedData}
    />
  );
};

Here you have a hook that lives outside the component logic, so it can now go in its own file and be used across your project.

Answer 2

Like it says React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks. React has this limitation so that it can track the state and effects. In your case you can define you custom hook to return a function which does the desired work, instead of directly doing it in your hook.

In this case your custom hook file will look something like this-

const useDataChange = () => data => {
    console.log(data);
};

export default useDataChange;

Then in your component you can use it like this -

import React, { useEffect, useState } from 'react';
import useDataChange from '../../hooks/useDataChange';


const SomeComponent = () => {
    const callback = useDataChnage();
    return (
    <Table handleTableChange={callbackdata} />
   );
};

export default SomeComponent;