Simple project used to learn React Hooks. Based on the video React Hooks na prática, by Rocketseat.
This app is built using:
- ⚛️ React Js — A JavaScript library for building user interfaces
-
useState
Hook used to store a piece of state and modify it. Returns two values: the state and the function used to modify it. Receives an argument, which is the initial state.
const [repositories, setRepositories] = useState([]);
In the example above, there's a state called
repositories
, which initial value is[]
. To update it, it's necessary to callsetRepositories
, like shown below:setRepositories([...repositories, { id: Math.random(), name: "New repo" }]);
-
Functions inside components
Since components are now written as functions instead of classes, there's no need to use this anymore. To use functions, simply declare them inside your component (yes! functions inside functions). In JavaScript, when a function is declared inside another function, it gets scoped inside its parent. That way, it is not possible to access it externally.
-
useEffect
The
useEffect
hook receives two params: (1) the function to be executed and (2) the circumstances when this function should be executed. Those circumstances are, in fact, events of variables changing. For the example below, the function will be executed every time the variablerepositories
changes.useEffect(() => {}, [repositories]);
Note: it's possible to pass more than one variable to the hook, that's why the second argument is an array.
-
How to use lifecycles?
Now that components are written as functions, lifecycles are used through the
useEffect
hook.- componentDidMount: executed only once, after component is mounted. To reproduce it using hooks, pass an empty array. As there is no variables passed, it will listen to nothing, never being triggered again.
useEffect(() => {}, []);
- componentDidUpdate: executed on every component update. To reproduce it using hooks, pass one or more variables. Note that now it's possible to have several componentDidUpdate behaviours, one for each state piece.
useEffect(() => {}, [repositories]);
- componentWillUnmount: executed when component is umnounted. To reproduce it using hooks, the
useEffect
hook must return a function. Every function returned by anuseEffect
hook is executed when a component is unmounted and no longer exists. Note that now it's possible to have several componentWillUnmount behaviours, one for each state piece.
useEffect(() => { // function body return () => {}; // function to be executed when component unmounts }, []);
Example using concept of subscribing and unsubscribing listeners:
useEffect(() => { const watchId = navigator.geolocation.watchPosition(handlePositionReceived); return () => navigator.geolocation.clearWatch(watchId); }, []);
To run this project, just clone it and execute the following:
yarn install // install dependencies
yarn start // run project