React js using hooks useState infinite loop rendering?

Try running the following code in a useEffect hook:

const talonProps = useFaq({
  query: getAllFaqs
});
const { data, error, loading } = talonProps;
setState({data})

That would look like:

import React, { useMemo, useState, useReducer, useEffect, useCallback } from 'react';
import getAllFaqs from './faqQuery.graphql';
import { useFaq } from '../../peregrine/talons/Faq/useFaq';

const Faq = props => {
  const [state, setState] = useState({})
  
  useEffect(() => {
    const talonProps = useFaq({
      query: getAllFaqs
    });
     const { data, error, loading } = talonProps;
     setState({data})
     console.log("Thank data", state)
  }, [])

  return (<div>its Working</div>);
};

What's happening is every time the component renders, it calls your query and sets state, causing the component to re-render again, which calls your query and sets state, causing the component to re-render again ... Using useEffect with the second parameter being an empty array will make your component call your query when the component first renders and set state only once.

Dont setState in the functional component directly. Use onCompleted event:

import React, { useMemo, useState, useReducer, useEffect, useCallback } from 'react';
import getAllFaqs from './faqQuery.graphql';
import { useFaq } from '../../peregrine/talons/Faq/useFaq';

const Faq = props => {
  const [state, setState] = useState({})
  const talonProps = useFaq({
    query: getAllFaqs,
    onCompleted: ({ data, error, loading }) => setState({data})
  });

  console.log("Thank data", state)
  return (
    <div>its Working</div>
  );
};