Call Function On Mount in ReactJS

Question

I have a problem calling a function when a component loads on ReactJS. I try to use componentDidMount() and has error compiling. Pls check my code below. Thanks

export default function Customers() {
    const classes = useStyles();
    const searchBarStyles = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(10);
    const dispatch = useDispatch();

    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };

    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };

    const fetch = () => {
      dispatch(fetchPendingAdmissions());
    };

    componentDidMount() {
        fetch()
    }

    return (
      <div>
        <h1 className={classes.h1}>Customers</h1>
        <Paper component="form" className={searchBarStyles.root}>
          <InputBase
            className={searchBarStyles.input}
            placeholder="Search..."
            inputProps={{ 'aria-label': 'search...' }}
          />
          <IconButton type="submit" className={searchBarStyles.iconButton} aria-label="search">
            <SearchIcon />
          </IconButton>
        </Paper>
        <Paper className={classes.root}>
          <TableContainer className={classes.container}>
            <Table stickyHeader aria-label="sticky table">
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>ID</TableCell>
                  <TableCell>Order Date</TableCell>
                  <TableCell>Actions</TableCell>
                  <TableCell></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell>Robert</TableCell>
                  <TableCell>1324171354</TableCell>
                  <TableCell>07-21-20</TableCell>
                  <TableCell>
                    <Button onClick={fetch} variant="contained" color="primary" startIcon={<VisibilityIcon />}>
                      View
                    </Button>
                  </TableCell>
                  <TableCell>
                    <Button variant="contained" className={classes.buttonSuccess} startIcon={<ThumbUpIcon />}>
                      Approve
                    </Button>
                    <Button variant="contained" className={classes.buttonError} startIcon={<CancelIcon />}>
                      Decline
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            rowsPerPageOptions={[10, 25, 100]}
            component="div"
            count={10}
            rowsPerPage={rowsPerPage}
            page={page}
            onChangePage={handleChangePage}
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        </Paper>
      </div>
    );
  }

Answer 1

The componentDidMount() lifecycle method is only used in class-based components. You can use the useEffect hook with an empty dependency array for loading your function when the component mounts.

import React, {useState, useEffect} from 'react'

useEffect(() => {
  fetch();
}, []);

Note: useEffect is short for use side effect. useEffect allows us to combine componentDidMount and componentDidUpdate lifecycle methods.

Gotchas:

• If you don't pass any variable to the dependency array, it will only get called on the first render exactly like componentDidMount otherwise the hook will be fired every time the value in the dependency array changes.
• If you don't pass an array into the useEffect hook, the component will be reloaded repeatedly.