React Hooks

React hooks are a built in feature of the React Framework. React Hooks allow us to call special hook functions within a functional component. These hooks allow us developers to make our components dynamic. Throughout the components lifetime they may have to change the state of its data, access DOM elements, respond to lifecycle methods and many more things. React has 10 built-in hooks and you can create your own. This feature is new to React version 16.8 traditional used class components for these sorts of things. Instead of having to have a constructor and more code to read, the hooks look so much cleaner and super easy to read.

The class component is shown below. The 3 React hooks I will be writing about today that I think every React developer must have committed to memory are the useState, useEffect and useContext hooks.

useState Hook

The useState hook is by far the most used and important hook in the framework. You must first create an important state with the useState in curly braces. You use this hook when you want data to dynamically change and when the data changes re-render that to the UI. useState takes one optional argument, which becomes the initial state. This then returns an array which returns 2 values. The 1st value is usually the reactive value or state and the 2nd value is a setter function. This setter function allows us to update the state of our component. Id say the greatest thing about this hook is that we don’t have to type the “this” key word a million times anymore…. it’s the little things.

useEffect Hook

This hook was definitely the most confusing for me at first. To understand this hook you must understand a components lifecycle. In the old class component syntax, you used to have to use lifecycle methods such as componentDidMount which would be where you initialized data, componentDidUpdate which updated state and componentWillUnmount which will remove the component from the UI or unmount it. Keep these “side effects” in mind. The useEffect hook allows us to implement logic of those lifecycle methods from just one function api. This hook is a function that takes a developer defined function as its first argument. It will run its function after every time the stateful data of our component changes. If we had to fetch data when the component is first rendered, as well as updating the state asynchronously, after the data was fetched. This would result in an infinite loop because each time we do the fetch we update state and triggers a fetch and so forth. We get around this by adding an array as the second argument of the useEffect hook. This is called an array of dependencies. If the array is empty, that means there are no dependencies and it will only run once, when the component is first rendered. You could also put the state into the dependencies array. React will track that data and anytime it changes it will re run the function. You could also use this hook to tear down a component.

useContext

The useContext hook allows us to work with the React Context api. This is a built in feature that allows you to share and or scope values throughout the component tree. We have an object called “feelings”, that can be either lmao or rofl. To share these feelings with other components we use createContext. We use the “.Provider” syntax to scope the. We set the value in the provider to the feelings.lmao. Now any child component inside of it can inherit that value, without needing to pass any props down to the children. The hook allows us to access the current value from the provider, which can live levels higher in another component tree. If the feelings ever change from lmao to rofl, the value in FeelingEmoji will be updated automatically. This hook is a replacement of the “.Consumer” component, it is much cleaner.