What is React Hooks

There are 4 types of Hooks :

• State Hook
• Effect Hook
• Custom Hook
• Other Hook (Native Hooks with specific functions)

In short:

" When would I use a Hook? If you write a function component and do you need to add some state to it, you previously had to convert it to a class. can use the Hook inside the existing function component. "

Translating ...

When would I use a hook? If you write a function component and realize that you need to add some state to it, you previously had to convert it to a class. use a hook within the existing function component. "

It was thought for people who are not essentially JS programmers, and have a hard time understanding how this works in language, so before the person had to understand it:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

And now she just needs it:

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Basically you have a constructor function that returns two values, the first is the created object and the second is a setter that changes the initial value, more or less like this:

class Hook {
  constructor(initialValue) {
    //Define o valor inicial passado por parâmetro
    this.value = initialValue

    //Define a função que altera o valor
    const setter = newValue => this.value = newValue

    //Retorna o objeto criado e a função setter
    return [this, setter];
  }

  //Retorno como string do objeto
  toString() {
    return this.value;
  }
}

const [value, setter] = new Hook('foo'); 

console.log(value);

setter('bar');

console.log(value);

//Aqui vai retornar o valor do toString
console.log('Esse é o valor: '+value);
//Equivalente a
console.log('Esse é o valor: '+value.toString());

  

What will change in the way you create Reacts projects?

You can continue to use classes and will not change anything, but now you can create more complex components in React with simple functions. But it's important to remember that, for now, this feature is in testing (React v16.7.0-alpha)

What are Hooks?

Its implementation started from version 16.7.0-alpha.0 and the promise is that the developer can gradually move from the current standard to the hooks without Breaking Changes and without breaking the head very much, use both ways.

Hooks are categorized as basic and additional as follows:

Basic Hooks:

• useState
• useEffect
• useContext

Additional Hooks:

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeMethods
• useMutationEffect
• useLayoutEffect

Explaining the basic Hooks.

useState allows you to read and store information in the most convenient and practical way in the state, eliminating some class components and replacing functional components.

UseEffect is the hook we use to perform functions that require or do some effect on the component, for example, mutations, subscriptions, timers, and logging. It has the same effect as the componentDidMount and componentDidUpdate has in classes.

useContext is a hook that allows you to use the Context by passing the state between the Provider components (from where the state comes) and Consumer (who will receive) easier and faster.

Conclusion.

Hooks came to help the developer write components more simply and legibly.

You will not need to refactor all classes and the entire project. They will not break your code and you can even write in two ways until you get used to them.

The hooks will not kill the redux either, they can even be used with it.

Caution is required when using hooks such as useMutationEffect and useLayoutEffect, as they may cause unwanted effects and performance problems.

In my blog there is an example with a link to download the code in gitHub

link