RainbowJet

.swiper-button-disabled{
    display:none;   
}

const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])

const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])

${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

import { createGlobalStyle } from 'styled-components';

export function fontFace(name, src, fontWeight = 'normal', fontStyle = 'normal'){
    /* eslint-disable */
    return `
      @font-face{
          font-family: "${name}";
          src: url(${require('../../../../fonts/' + src + '.eot')});
          src: url(${require('../../../../fonts/' + src + '.eot')}?#iefix) format("embedded-opentype"),
               url(${require('../../../../fonts/' + src + '.woff')}) format("woff"),
               url(${require('../../../../fonts/' + src + '.ttf')}) format("truetype"),
               url(${require('../../../../fonts/' + src + '.svg')}#${name}) format("svg");

          font-style: ${fontStyle};
          font-weight: ${fontWeight};
      }
  `;
}

export const GlobalStyle = createGlobalStyle`
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Thin', 100, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Light', 300, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Roman', 'normal', 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Medium', 500, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

  *{
    box-sizing: border-box;
  }

  a{
    color: #17b0e7;
    text-decoration: none;
  }

  body{
    font-family: 'HelveticaNeue';
  }
`;

const fd = Object.entries(data).reduce((fd, n) => (fd.append(...n), fd), new FormData);

const Foo = ({ dispatch }) => {
  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default connect()(Foo);

const Foo = () => {
  const dispatch = useDispatch();

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default Foo;

const Foo = ({ value }) => {
  return (
    <Bar value={value} />
  );
};

const mapStateToProps = state => ({
  value: state.value,
});

export default connect(mapStateToProps)(Foo);

const Foo = () => {
  const value = useSelector(state => state.value);

  return (
    <Bar value={value} />
  );
};

export default Foo;

const valueSelector = state => state.value;

const Foo = () => {
  const { dispatch, getState, subscribe } = useStore();
  const value = valueSelector(getState());
  
  useEffect(() => subscribe(console.log), []);

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} value={value} />
  );
};

export default Foo;

const allLinks = document.querySelectorAll('.slide-img a');
allLinks.forEach(el=>el.addEventListener('click',function(e){
e.preventDefault();
console.log(el.querySelector('img').getAttribute('src'));
});