Así que me pregunto por qué cuando paso información a funciones como esta, tengo que convertirla en una función de flecha en comparación con un onClick donde solo tengo el nombre de la función sin paréntesis. ¿Esto también tiene algo que ver con por qué no llamar a la función dentro de una función de flecha simplemente ejecutará la función en el procesamiento, y luego no volverá a ejecutar la función cuando se haga clic en el div?

 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> )

En vez de:

 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> )