Hooks are a new addition in React 16.8. The most useful feature of Hooks is that it allows using state without using class.
Effect hook will get invoked with the first DOM updating. We can pass in a function in useEffect, and every time the DOM gets updated, the function in useEffect will get invoked too. Also, the effect hook allows you to pass in an array as the second argument, which contains all the dependencies that will trigger the effect hook. if any of the dependencies changed, the effect hook will run again. This feature provides us a more efficient way to make an Ajax request. Instead of making the request every time with DOM updates, you can pass in dependencies that only make the request while these values change.
Comparing with these two ways to create a component, we can clearly see that hooks need less code and it is more clear to read and understand. Hooks give us a more efficient way to replace lifecycle methods.
One of the challenges I faced is to pass props from Laravel to React using Blade, and I’ve found a very quick workaround. Let’s suppose your react component gets an entity ID as a prop so you can load data when your component will mount, the idea here is to create a div in your Blade view which will contain the props you will be passing to your components
Make sure your .babelrc file is in the root folder of your application, and add the following code:
Run npm install –save-dev @babel/plugin-proposal-class-properties.