What does the "ref" do in this React code - reactjs

Question

I'm a beginner and read lots of code and this one I cant find any docs on
How does that work I cant see that ref is used in the Slider or maybe it is
The file:
/* eslint-disable react/jsx-props-no-spreading */
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import React from 'react';
import Resume from '../../resume.json';
import albums from '../../albumData.json';
const la = require('lodash');
class SliderWrapper extends React.Component {
shouldComponentUpdate(nextProps) {
// certain condition here, perhaps comparison between this.props and nextProps
// and if you want to update slider on setState in parent of this, return true, otherwise return false
const { updateCount } = nextProps;
const { updateCounter } = this.props;
if (updateCounter !== updateCount) {
return false;
}
return true;
}
sliders() {
return Resume.weeks.map(week => {
let photo = la.find(albums, { weekNumber: week.weekNumber });
photo = encodeURIComponent(`${process.env.PUBLIC_URL}/images/weeks/${week.weekNumber}/${photo.coverImage}`);
const { onImageClick } = this.props;
return (
// Timeline items
<section className="timeline-carousel" key={week.weekNumber}>
<h1>week {week.weekNumber}</h1>
<div className="timeline-carousel__item-wrapper" data-js="timeline-carousel">
<div className="timeline-carousel__item">
<div className="timeline-carousel__image">
<img onClick={() => onImageClick(week.weekNumber)} alt="CoverImage" src={photo} />
<h2>UNDER CONSTRUCTION IN PROGRES..</h2>
</div>
<div className="timeline-carousel__item-inner">
<div className="pointer" />
<span className="year">{week.year}</span>
<span className="month">{week.albumDate}</span>
<p>{week.summary}</p>
<a href="#/" className="read-more">
Read more, Dev should go to read more
</a>
</div>
</div>
</div>
</section>
);
});
}
render() {
const { afterChanged } = this.props;
const { beforeChanged } = this.props;
const settings = {
dots: false,
arrows: false,
autoplay: false,
infinite: true,
lazyLoad: false,
swipeToSlide: true,
centerMode: false,
focusOnSelect: false,
className: 'center',
slidesToShow: 4,
afterChange: afterChanged,
beforeChange: beforeChanged,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
return (
<div>
<Slider
ref={slider => {
this.slider = slider;
}}
{...settings}
>
{this.sliders()}
</Slider>
</div>
);
}
}
export default SliderWrapper;

Answer 1

Refs provide a way to access DOM nodes or React elements created in the render method.
Checkout ReactJS Docs for more information