Title: React gives Too many renders error when trying to sort data
Tags: javascript;reactjs
Question: I'm trying to sort the table with the data I get from an API.Basically, what I want is that I would sort the table ascending or descending according to which cell has clicked. To do so I've created this code but I do something wrong but not able to see it. Would be happy if anyone can guide me on where I'm having the trouble. I keep getting this error message every time I run the app : ```Too many re-renders. React limits the number of renders to prevent an infinite loop.```

What do I have : 

```import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import Moment from 'react-moment';
import _ from 'lodash'

const UserTable = ({ repoData }) =&gt; {
    const [initialObject, setInitialObject] = useState({
        column: null,
        data: repoData,
        direction: null
    });


    const handleSort = (clickedColumn) =&gt; {

        if (initialObject.column !== clickedColumn) {
            setInitialObject({
                column: clickedColumn,
                data: _.sortBy(initialObject.data, [clickedColumn]),
                direction: "ascending"
            })
            return
        }
        setInitialObject({
            data: initialObject.data.reverse(),
            direction: initialObject.direction === "ascending" ? "descending" : "ascending",
        })
    }

    return (
        <div &gt;
            <Table sortable celled fixed&gt;
                <Table.Header&gt;
                    <Table.Row&gt;
                        <Table.HeaderCell
                            sorted={initialObject.column === 'name' ? initialObject.direction : null}
                            onCLick={handleSort("name")}
                        &gt;
                            Repository Name
        </Table.HeaderCell&gt;
                        <Table.HeaderCell
                            sorted={initialObject.column === 'description' ? initialObject.direction : null}
                            onCLick={handleSort("description")}
                        &gt;
                            Description
        </Table.HeaderCell&gt;
                        <Table.HeaderCell
                            sorted={initialObject.column === 'created_at' ? initialObject.direction : null}
                            onCLick={handleSort("created_at")}&gt;
                            Created At
        </Table.HeaderCell&gt;
                    </Table.Row&gt;
                </Table.Header &gt;
                <Table.Body&gt;
                    {initialObject.data.map(repos =&gt; {
                        return <Table.Row&gt;

                            <Table.Cell&gt;{repos.name}</Table.Cell&gt;
                            <Table.Cell&gt;{repos.description}</Table.Cell&gt;
                            <Table.Cell&gt; <Moment fromNow&gt;{repos.created_at}</Moment&gt;</Table.Cell&gt;
                        </Table.Row&gt;

                    })}


                </Table.Body&gt;
            </Table&gt;
        </div&gt;
    );
}

export default UserTable;

```


Here is the accepted answer: Issue is with ```onClick``` :

```onClick={handleSort("name")} // <-- this will call the function on render it self
```

```const handleSort = (clickedColumn) =&gt; {
    if (initialObject.column !== clickedColumn) {
        setInitialObject({  // <------------ HERE : this will also cause rerender
            column: clickedColumn,
            data: _.sortBy(initialObject.data, [clickedColumn]),
            direction: "ascending"
        })
        return
    }
    setInitialObject({ // <------------ HERE : this will also cause rerender
        data: initialObject.data.reverse(),
        direction: initialObject.direction === "ascending" ? "descending" : "ascending",
    })
}
```

Result : infinite loop

```Too many re-renders. React limits the number of renders to prevent an infinite loop.
```



Solution is, change it to :

```onClick={() =&gt; handleSort("name")}
```

Comment for this answer: Thanks, that was the real problem but do you mind explaining the potential thing causing this error when its not arrow function?
Comment for this answer: `onClick={handleSort("name")}` this invokes the function without clicking , and arrow function will only invoke when it's clicked, and its not due to arrow, it's because you are passing parram, if you try `onClick={handleSort}` this will not invoke because you are not calling it, you are just passing function ref, but with `onClick={handleSort("name")}` this you are first calling the function


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:05/23/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs>', 'Title': 'React gives Too many renders error when trying to sort data', 'ViewCount': 183, 'id': 61966651, 'user_AboutMe': '', 'user_AccountId': 16771361.0, 'user_DisplayName': 'em_code', 'user_Reputation': 341.0, 'user_Views': 47.0, 'user_id': 12123712.0}}