Sort Dependency List

Name

sort-dependency-list

Description

Sorts React dependency lists

Example

useEffect(() => {
    // ...business logic here
}, [setProject, handleOpenDialog, isLoading]);

will be transformed to:

useEffect(() => {
    // ...business logic here
}, [handleOpenDialog, isLoading, setProject]);

Notes

Dependencies that have nested property accessors (i.e. project.name) will be alphabetized by the first variable name.

const value = useMemo(() => {
    // ...business logic here
}, [x, setProject, handleOpenDialog, theme.colors.gray900]);

will be transformed to:

const value = useMemo(() => {
    // ...business logic here
}, [handleOpenDialog, setProject, theme.colors.gray900, x]);