The eco-system of front-end development is continuously evolving.
New tools are being released on a daily basis and with so many libraries and frameworks available to choose from, it has become more difficult for business owners to make the right choice.
But what if you decide to bootstrap and grow your application using React? 🧐
In today’s world, React has become one of the most popular libraries used by primarily front end web developers, around the globe. The main reason why it is so preferred is because of its speed and simplicity to reuse code using virtual DOM and components respectively.
And during #JSWORLDConference, Daniel Afonso shared his experience covering all the “did work” and “didn’t work” scenarios from some of the popular subjects in the React world 🥳 So let’s find out, why is React the ideal frontend framework?
Watch and Enjoy the full talk 👉 here
First let’s determine the pros and cons of the topic that revolves around the most fundamental topic of React- STATES!
React hooks vs Class components
React hooks have been around for some time now, yet many React developers are not actively using them.
The first reason identified by Daniel is that with class components with have a lot of giants components, dealing with live cycle function (like componentDidMount(), componentDidUpdate() and etc.). The other reason is the reusing of logic, as with Class Components it is impossible to use stateful logic between components. Also, the conclusive factor that Daniel identified, was that using Class Components is confusing, for both humans and computers.
Let’s also not forget about the advantages of the Hooks and why they should be considered in the first place.
Code readability is main point that outstands React hooks, as well as code of reusability. Daniel also considers Hooks easier to be learned and taught.
Tips from Daniel Afonso when using React Hooks👇
- Pay attention to the rule of hooks.
- Don’t pre optimise everything
- Think in Effects
The next fact we don’t need to underestimate is that the massive growth of React.JS has given birth to different state management libraries, amongst other things.
Therefore, knowing what state management library to choose for a particular project not to get carried away by the noise and news from the React community is a significant factor in facilitating the development of an application.
State Management
From the start of project, Daniel with his colleagues were using Redux, however it’s downsides were reflecting on the project enormously. It was an unnecessary optimisation and the fact that it is not supporting middlewares also played a huge role.
Thus, Daniel would suggest using Context. It is way more efficient to use as related logic gets easily grouped into the same context with it, as well as it is excellent for more static data - not so frequency updated like in Redux.
Check out the recording of the talk to see the real life case study and learn by the examples given by Daniel Afonso within his talk at #JSWORLDConference 2022.
The final and extremely crucial point in building a React Application is Testing 🤩
Testing
One of the most important parts in a development process, no matter the framework, the language or if you're a frontend or backend is testing, as the tests are vital to verify that your codes really do what was coded to do.
Daniel Afonso shared his opinion on using Ezyme (JavaScript Testing utility for React), as well as identified and demonstrated the reasons why he considers the React Testing Library to be a better choice for conducting the testing. Watch this amazing talk to find out more and learn by the incredible real life case study from Daniel Afonso via our video platform 👉 here.
🔥 If you want to educate yourself more on the React topic and discover this JavaScript library, join us during our React Conference Live on 1 April 2022 in-person at Theater Amsterdam! For more information follow this 👉 link.