Forem: Jack Buchanan-Conroy

React 18: What’s changed? [Automatic Batching]

Jack Buchanan-Conroy — Sun, 18 Jul 2021 17:39:14 +0000

Since it’s initial release back on May 29, 2013, React has gone from strength to strength, finding new and exciting ways to shake up the Front-End world. Most developers can certainly agree that React has revolutionised the way in which we create and implement user-friendly interfaces. Certainly If you are a React developer, then there is no doubt that you’ve heard about React 18.

Obviously there is still a lot more information yet to be released, but in this series of posts we are going to take a quick 1 minute dive into some of the latest and greatest features that React 18 has to offer us.

Automatic Batching

A revolutionary new feature that React 18 is set to offer us is automatic batching. If you haven’t already heard of batching in React, it is what happens whenever multiple state updates are combined into a single re-render. If you’re calling multiple state updates in a different context such as a callback, a promise or a timeout, React won’t batch these two updates into one and you’ll get two re-renders when you probably only needed one. With automatic batching the plan is for state updates to be batched automatically by default, regardless of the context. You will still have the option of not batching your updates, but you will need to use flushSync to re-render your component every time it has finished running the function. As flushSync actually forces the complete re-rendering for updates that happen inside of a call, you should use it very sparingly.

In the next post we are going to take a look at Transitions!

GraphQL - Why you should be using it in 2021.

Jack Buchanan-Conroy — Wed, 14 Jul 2021 16:24:37 +0000

It would seem that every day, more and more companies have been pushing to introduce GraphQL in their modern applications, but what exactly is GraphQL and why should you be using it in your projects in 2021?

What is GraphQL?

GraphQL is a query language for reading and mutating data in APIs. It provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

What problems does GraphQL solve?

Traditionally, Front-End Developers have consumed APIs using REST, where data entities exist on a group of URLs on a server. When a request is received the API responds with the full data payload of that entity. Although that sounds simple, there are two big disadvantages here.

The first disadvantage, is that we could need multiple entities at one time, in which case each request is under fetching the actual data we want.

The second disadvantage, is that we may only want a small part of that data (in which case we need to over fetch from the API and that is both costly, and bad for the environment).

GraphQL provides Back-End Developer's with a type system where they can describe a schema for the data, in turn this gives us Front-End Developers the power to explore and request the exact data we need from the API. With GraphQL, instead of multiple URLs an API has a single entry point where data is queried (or fetched) by describing it with a syntax that replicates its return shape in JSON. As Front-End Developers we can describe exactly the data we want while the Back-End Developer writes code to resolve the request. Best of all, everything happens in a syntax that can work agnostically with any programming language.

What is so amazing about types?

GraphQL APIs are organized in terms of types and fields, not endpoints. Using the type syntax in this way allows you to access the full capabilities of your data from a single endpoint. GraphQL uses types to ensure Apps only ask for what’s possible and provide clear and helpful errors. Apps can use types to avoid writing manual parsing code.

VS Code: 6 Extensions you absolutely need in 2021 as a React Developer

Jack Buchanan-Conroy — Mon, 12 Jul 2021 09:03:46 +0000

We are going take a quick look at some of the best extensions available in Visual Studio Code and why you should absolutely be using them to supercharge your daily coding activities.

In case you’ve been living under a rock for the past 6 years, Visual Studio Code is an industry leading source code editor for Windows, Linux and Mac OS. It offers us a great hybrid between a text editor (such as Atom) and a full-on IDE (such as Visual Studio). It’s lightweight, fast and best of all completely free across all platforms. I myself switched (along with most other JavaScript developers) to VS Code from Sublime Text back in 2016 and have personally never looked back.

Without further ado, let’s talk extensions for 2021!

1 Prettier:

The first extension on this list and the one you have almost certainly heard of before is Prettier. Prettier offers us an, opinionated out of the box, fully customisable code formatter. You can set it up in minutes to auto-format your code when you click save, shaving hours off your development time.

2 Bracket Pair Colorizer:

Have you ever spent hours trying to work out an error, only to find out later that it was because you had missed one of these bad boys “({[“ ? Enter Bracket Pair Colorizer to save the day! This extension allows matching opening and closing brackets to be identified with colours, so you can spot those pesky missing brackets. You can define both which characters to match, and which colours to use. Trust me, you’ll never miss a bracket again ;)

3 ES7 React Snippets (dsznajder):

If you are a React developer who users Redux, then it’s very likely that you know about the pains of writing out lines and lines of boiler plate code. JavaScript and React/Redux snippets in ES7 helps to reduce the time you take to write code by providing some fast and furious shortcuts for the most common syntax. Need a React functional component? No problem! It’s just a case of typing out 4 letters “rafce” and hitting the enter key. You also get a handy Babel plugin features for VS Code.

4 Tabnine:

Tabnine is a GPT-2 based code completion tool powered by machine learning, that can honestly help to save you hundreds of hours in development time (think snippets on steroids!) Tabnine utilises common code semantics, from critical open source projects, to provide fast auto-complete suggestions. Tabnine is free and works on a number of IDEs for most modern programming languages.

5 Live Share:

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.

6 GitLens:

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.