CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Murakami
Murakami

Reputation: 3760

React custom hooks in callback

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?

Upvotes: 8

Views: 15715

Answers (2)

Vikash Kesarwani
Vikash Kesarwani

Reputation: 850

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;

Upvotes: 0

Jake Luby
Jake Luby

Reputation: 1758

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.

Upvotes: 5

Related Questions