So I'm wondering why when I pass info into functions like this, why I have to make it an arrow function compared to an onClick where I just have the function name without the parenthesis. Does this also have something to do with why not calling the function inside an arrow function will just run the function on render, and then it won't run the function again when the div is clicked?

    return(
        <div className="slider">
            <div onClick={() => arrowClicked(-1)} className="slider-left-arrow slider-arrow"></div>
            <img className="slider-image-initial" alt="not found" src={imageArray[imageArrayPosition]} />
            <div onClick={() => arrowClicked(1)} className="slider-right-arrow slider-arrow"></div>
        </div>
    )

Instead of:

    return(
        <div className="slider">
            <div onClick={arrowClicked(-1)} className="slider-left-arrow slider-arrow"></div>
            <img className="slider-image-initial" alt="not found" src={imageArray[imageArrayPosition]} />
            <div onClick={arrowClicked(1)} className="slider-right-arrow slider-arrow"></div>
        </div>
    )