React components are simply functions. Some are created with classes, better known as stateful and / or class components, and the others are created with functions only, also known as stateless and/or functional components. In addition to having different syntaxes, stateful components have some more functionality, such as state, lifecicles, constructor, this and etc., while stateless components have always been more used to create ' ', just for display, without much logic involved. dumbs components But that has been changing since the arrival of the React Hooks, which is a proposal to facilitate and make development with React more flexible, bridging the gap between stateful and stateless components. What is React Hooks? In short: React Hooks are some methods that give more power to your stateless components, like own and independent states, some lifecicles, subscription, logic sharing, reducers and etc. This article will explain two functions presents in React Hooks: useState; useEffect; useState The most basic function of React Hooks is useState. With it you can add states in a functional stateless component. The useState method takes a parameter, which is the State's initial value, and returns two properties in an array, the first is the State itself and the second is the method used to update it. Here some example how you use state : without React Hooks { const categories = [ n', y', y', r', s'] constructor(props) { (props); .state = { title: '', category: categories[ ], }; .handleSubmit = .handleSubmit.bind( ); .handleChange = .handleChange.bind( ); }} . class BookForm extends React Component 'Actio 'Biograph 'Histor 'Horro 'Kid super this 0 this this this this this this With React Hooks: BooksForm = { categories = [ , , , , ] [state, setState] = useState({ : , : categories[ ], }); }; const => () const 'Action' 'Biography' 'History' 'Horror' 'Kids' const title '' category 0 Always remember to import the function you wanna use your file: React, { useState } ; import from "react" useEffect The useEffects method is always called when the component is assembled and updated. With it you can replace the componentDidMount, componentDidUpdate and componentWillUnmount lifecicles. It executes the function inside it and has an optional second parameter, which is an array of properties to be observed within the scope of the stateless component. Whenever any of them are updated, the function is executed again. Here's an example using componentDidMount: componentDidMount() { res = axios.get( ); } async const await 'some_url' Applying useEffect: getSomeUrl = { res = axios.get( ) } useEffect( { getSomeUrl(); }); const => () const 'some_url' => () Importing useEffect in the top of your file: React, { useEffect} ; import from 'react' That was a very simple explanation about two functions presents in Reach Hooks. You can check more in the official documentation . here
