React

by Andrea Aloi

HTML

<div id="app"></div>

React

const { useState, useEffect } = React;

const MyComponent = () => {
  const [ mounted, setMounted ] = useState(false);
	const [ page, setPage ] = useState(0);
  const [ pageSize, setPageSize ] = useState(20);
  
  const fetchLogs = ({ triggeredBy }) => {
  	console.log(`HTTP request triggered by ${triggeredBy}: requesting page ${page}, limit to ${pageSize} log entries`);
  };
  
  useEffect(() => {
  	console.clear();
  	fetchLogs({ triggeredBy: 'initial mount (nothing has changed)' });
    setMounted(true);
  }, []);
  
  useEffect(() => {
  	if(mounted) {
    	fetchLogs({ triggeredBy: 'first effect (page has changed)' });
    }
  }, [ page ]);

  useEffect(() => {
  	if(mounted) {
    	setPage(0);
    	//fetchLogs({ triggeredBy: 'second effect (pageSize has changed, page is reset to 0)' });
    }
  }, [ pageSize ]);
  
  return (
  	<div>
      <button onClick={ () => setPage(page - 1) }>-</button>
  	  <button onClick={ () => setPage(page + 1) }>+</button>
      <select value={ pageSize } onChange={ e => setPageSize(e.target.value) }>
        {[10, 20, 30].map(pageSize => (
        	<option key={ pageSize } value={ pageSize }>{ pageSize }</option>
        ))}
      </select>
  	</div>
  );
}

ReactDOM.render(<MyComponent />, document.querySelector("#app"));