Why is ReactJS + GraphQL an amazing combination?
According to the 2019 StackOverflow’s survey, React is the 2nd most popular web framework after jQuery on the net, with 31.3% of respondents of the study using it.
After Facebook re-licensed the framework to MIT from the initial BSD license, which came with copyright reservations, the adoption of the framework by developers has grown exponentially. Most Full Stack Developers are now of the MERN (MongoDB, Express, React, NodeJS) stack.
Why React took over the front-end
The upsell of React is that everything is a component. A React component is a reusable user interface component that can be used over and over in the UI. Imagine a React App as a Lego house with each of the Lego blocks being a react component. The components sum up the App.
With everything being a component, you can re-shuffle your whole App at any point without totally distorting the application. Here are other key features of React:
- Custom Components: every pixel on the screen is a component that is responsible for displaying itself. A full UI in react is a tree of components. These components are rendered with JSX, where each JSX component is rendered as a DOM Element in the browser. These function components can then be called in other functions.
- Data Management: data coming from a given component’s parent is called a prop; this can be passed down using JSX attributes from a parent to a child component. A state also defines internal component data. When a change occurs in state or props, the component re-renders automatically, and the React’s reconciliation’s feature kicks in place to determine if a DOM partial re-render is needed. This is what makes React all-powerful.
- Context – React allows developers to define a global or inner context between the chain of components. This is a very powerful feature which allows the use of Themes for example, where the whole web application’s theme can be controlled from one centralized place.
What is GraphQL all about?
GraphQL is a query language, used for sending and retrieving data over HTTP that marked a revolutionary look at APIs as well as the steady decline of REST APIs.
What makes GraphQL better than REST
- No more over fetching or under fetching of data: REST APIs are notorious for over and under fetching data because clients typically download data by hitting fixed endpoints. Think of it this way; REST APIs routinely return whole arrays while GraphQL can query the exact point the Application needs per time.
- The power is in the client – All the web applications nowadays are Frontend driven, which means that backends must be flexible according to the needs of the UI. GraphQL gives the power to the client making “him” the one who determines what is needed to be fetched with a single GraphQL request to the backend. Rest APIs are not dynamic at all, they return just this type of response that they’re created for, and client usually needs more than this, so achieving it requires more than 1 request.
- Rapid development and iterations on the front end: with REST APIs, endpoints are structured according to views in the App. The major drawback of this method is that it doesn’t allow rapid iterations and deployment on the front-end. With every change in the UI, more or fewer data might be required per call.
- Insightful Analytics with REST APIs: with the specificity of requested data in GraphQL, the backend provides optimal data on consumer and developer needs.
Why React + GraphQL is an amazing combination
With each re-shuffling of components in React, no changes are required in GraphQL. So rapid iterations can be deployed in React without any corresponding changes to the API. These make development faster, especially with remote and distributed teams.
Under and over fetching of data in REST puts a strain on server resources. Slowing down the total application speed. React, and GraphQL is terrific at building lean, fast, and responsive websites, which can be maintained for a very long time thanks to the huge open source community which stands behind them.