roeib

import React, { Component } from "react";

class MyComponent extends UseEffectExample {
  constructor(props) {
    super(props);
    this.state = {
     width: window.innerWidth;
    };
  }

roeib

// only run on mount. pass an empty array
useEffect(() => {
  // only runs once
}, []);

roeib

// only run if count changes
useEffect(
  () => {
    // run here if count changes
  },
  [count]
);

roeib

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [width, setWidth] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    
    return () => {

roeib

import React, { useState } from 'react';

function GetGitHubUsers() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.github.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data); // set users in state

roeib

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText} numberOfLines={2}  >

roeib

create-react-app react-spring-example

roeib

npm install react-spring

roeib

import React, { useState, useEffect } from 'react'
import { useTransition, animated, config, useSpring } from 'react-spring'

const slides = [
    { id: 0, url: 'photo-1544511916-0148ccdeb877?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1901&q=80i' },
    { id: 1, url: 'photo-1544572571-ab94fd872ce4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1534&q=80' },
    { id: 2, url: 'reserve/bnW1TuTV2YGcoh1HyWNQ_IMG_0207.JPG?ixlib=rb-1.2.1&w=1534&q=80' },
    { id: 3, url: 'photo-1540206395-68808572332f?ixlib=rb-1.2.1&w=1181&q=80' },
]

roeib

import React from "react";
import { useSpring, animated } from "react-spring";

const FadeFromTopAndcounter = () => {
  const fadeFromtop = useSpring({
    to: { opacity: 1, marginTop: 0 },
    from: { opacity: 0, marginTop: -5000 },
    delay: "2000"
  });
  const counter = useSpring({