nsantos16

import React from 'react';

import ReactDOM from 'react-dom';

// Disable in production

if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe');

  axe(React, ReactDOM, 1000);

nsantos16

import React from 'react';

import ReactDOM from 'react-dom';

// Disable in production

if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe');

  axe(React, ReactDOM, 1000);

nsantos16

import React from 'react';

import usePageTitle from 'hooks/usePageTitle';

const ListPage = ({ items = [] }) => {
  usePageTitle('List of items');

  return (
    <div className="list-component">
      <ListTitle title="List component" />

nsantos16

import React from 'react';

const usePageTitle = title => {
  useEffect(() => {
    document.title = title;
  }, [document]);
};

export default usePageTitle;

nsantos16

<div class="list-component">
  <div class="list-title">
    <span>List component</span>
  </div>
  <div class="list-component-items">
    <span>List item 1</span>
    <span>List item 2</span>
  </div>
</div>;

nsantos16

import React, { Fragment } from 'react';

const ListItem = ({ item }) => (
  <Fragment>
    <span>{item}</span>
  </Fragment>
);

// Try to avoid index as key's

nsantos16

<div class="list-component">
  <div class="list-title">
    <span>List component</span>
  </div>

  <div class="list-component-items">
    <div>
      <span>List item 1</span>
    </div>

nsantos16

import React from 'react';

const ListItem = ({ item }) => (
  <div>
    <span>{item}</span>
  </div>
);

const List = ({ items = [] }) => (
  <div className="list-component">

nsantos16

const { status, data, error } =  useQuery('movies', fetchTodoList);

nsantos16

const [mutate, mutationState] = useMutation(patchMovies, {
   onSuccess: newMovie => {
     // Update `movies` while refetching all the list on background
     queryCache.refetchQueries(movies");
     queryCache.setQueryData(["movies", { id: newMovie.id }], newMovie);
   }
 });

const onSave = newMovie => mutate(newMovie);