React Hook “useState” is called in function “setResults” which is neither a React function component or a custom React Hook function

Question

I am trying to make an API call in a functional component which is a react-hook and based on the result, re-render the component's content. Here is the code:

Component which is calling the API-

function IntegrationDownshift() {
    render(
        <Paper square>
            {setResults(inputValue).map(
                (suggestion, index) =>
                    renderSuggestion({
                        suggestion,
                        index,
                        itemProps: getItemProps({
                            item:
                                suggestion.userFullName
                        }),
                        highlightedIndex,
                        selectedItem
                    })
            )}
        </Paper>
    );
}

Here is the setResults function:

function setResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}

I'm trying to get the state's data and re-render my component based on the data. Here searchUser is in the action which calls the external API.

1. The searchUser is calling the action and fetching the data successfully, but I'm not sure why the state is getting updated - I got the below error -

React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

2. As a second alternate, I'm trying to return the values from the searchUser and access it in the below function, still, no use

I'm new to hooks and any help/pointers will be helpful.

Answer 1

you need to put the first letter in uppercase setResults => SetResults

function SetResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}

Answer 2

function name must start with capital letter. so your function's name is setResults . you have to change it to SetResults.

Answer 3

React functional component names must be start with uppercase letter. If you menipulate the setResults to SetResults, then it will work.

And Hooks does't support in regular javascript classes so try to create an other component with the name of SetResults. And include it in main component

Answer 4

Actually the setResults needs to be capitalized like so

 function SetResults(){...} // S capitalized here

Note: If you are not using react hooks then you don't have to capitalize the first letter of the function name, but using hooks expects your function's first letter to be capitalized.

Similar issue is discussed here,

React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

Answer 5

A react function needs to return a renderable JSX to be recognized as React function. You are using "setResults" as a helper function - it is not returning renderable JSX. So the error 'React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks' makes sense.

Refer to this article about how to Fetch Data with useEffort - Author gave an excellent explanation about hooks.

https://daveceddia.com/useeffect-hook-examples/

Try this code

export default function IntegrationDownshift() {

    const [data, setData] = useState({ users: [] });

    // useEffect method is first called prior to render.
    useEffect(  () => {
        async function searchUser() { 
            // This will set Data Set and trigger render method
            setData(result.users);       
        }
        searchUser();
    }, [setData]);

    function renderSuggestion(suggestion) {
        // Pretty print the suggestion data here
        return <div> {suggestion} </div>;
    }
    return ( <Paper square> {data.map( (suggestion, index) => { 
        // Render each Suggestion
        return renderSuggestion( suggestion);
        } )}</Paper>);
}

Answer 6

Hooks basically let you use state and other React class component features in function components. So, call Hooks in a regular JavaScript function is not allowed. You can do it only at the top level of function components or at your custom Hooks.

Think in Hooks like this:

• useState is similar to this.setState in class components.
• useEffect is similar to componentDidMount and componentDidUpdate in class components.

React docs has a section explaining the rules to use hooks:

https://reactjs.org/docs/hooks-rules.html