sdolidze

import React, { useState  /* Component */ } from 'react'
import { useQuery, useMutation } from 'react-apollo-hooks'
import { graphql, compose } from 'react-apollo'

//Queryes importing
import { getArtistsQuery, addMussicMutation, getMussicsQuery } from '../Queries/queries'

//import Semantics
import { Button, Form, Modal, Icon } from 'semantic-ui-react'

sdolidze

import { useEffect, useState } from 'react';

function Hello() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('This is same as componentDidMount.');
    console.log('This code will run only once in the lifecycle.');

    return () => {

sdolidze

import React from 'react';

export interface PrivateRouteProps {
  component: React.FC<any>;
}

function PrivateRoute(props: PrivateRouteProps) {
  const { component: Component, ...rest } = props;

  return (

sdolidze

function App() {
  log('renderApp');

  const [count, setCount] = useState(0);
  const [items, setItems] = useState(getInitialItems(10));

  const inc = useCallback(() => setCount(count + 1));

  return (
    <div>

sdolidze

import React, { useState } from 'react';
import { render } from 'react-dom';
import { log, getInitialItems } from './utils';

const List = React.memo(({ items, inc }) => {
  log('renderList');
  return items.map((item, key) => (
    <div key={key} style={{ display: 'flex' }}>
      <div>item: {item.text}</div>
      <button onClick={inc}>inc</button>

sdolidze

const List = React.memo(({ text, inc }) => {
  console.log('renderList');
  return repeat(1000, key => (
    <div key={key} style={{ display: 'flex' }}>
      <div>{text}</div>
      <button onClick={inc}>inc</button>
    </div>
  ));
});

sdolidze

const List = React.memo(({ text, inc }) => {
  console.log('renderList');
  return repeat(1000, key => (
    <div key={key} style={{ display: 'flex' }}>
      <div>{text}</div>
      <button onClick={inc}>inc</button>
    </div>
  ));
});

sdolidze

const List = React.memo(({ text, inc }) => {
  console.log('renderList');
  return repeat(1000, key => (
    <div key={key} style={{ display: 'flex' }}>
      <div>{text}</div>
      <button onClick={inc}>inc</button>
    </div>
  ));
});

sdolidze

const List = React.memo(({ text, inc }) => {
  console.log('renderList');
  return repeat(1000, key => (
    <div key={key} style={{ display: 'flex' }}>
      <div>{text}</div>
      <button onClick={inc}>inc</button>
    </div>
  ));
});

sdolidze

const List = React.memo(({ text }) => {
  console.log('renderList');
  return repeat(1000, key => <div key={key}>{text}</div>);
});

export default function App() {
  console.log('renderApp');

  const [count, setCount] = useState(0);