Regardless of your level of experience, whether you're a seasoned developer or just starting out, I believe you'll discover at least one valuable resource within this collection. It's designed to expand over time, so if you have any suggestions for resources that you think should be highlighted, don't hesitate to reach out to me! Without any more delay, let's dive right into the edition!

Just for the juniors among us

I know that many of my readers are probably juniors, college students or generally people, who might not have that much work experience. Thus I selected a few learning sources, that cover the basics that are needed even before starting your React/Typescript journey!

• javascript.info

  • complete starter for your JS journey before you embark in to the world of Typescript

• 2023 Web Development Beginner Roadmap

• Typescript for the New Programmer

• Basic JS Concepts Before Learning React

• Frontend Developer Roadmap.sh

  • An interactive roadmap where you can view which topics you should learn on the developer path you take

Read the docs!

Documentation is one of the most important places to start, especially when you are dealing with React and Typescript, as their documentation is pristine and has quite a low friction when you know basic JS and web concepts.

• react.dev

• typescriptlang.org (read their amazing handbook)

And the Spicy Stuff 🌶

After you are finished with the docs (or at least have some basic knowledge) Then I recommend to read the following:

• type-challenges

  • A collection of Typescript challenges with an online judge

• Typescript Deep Dive

• React Design Patterns

  • This is an amazing resource on various design patterns from which can many be utilized also outside of React. Although this particular knowledge base might be a bit overwhelming for beginner programmers. I would recommend this to juniors and above.

• usehooks.com

  • Many useful React hook that you might need already implemented, tested and maintained

    Share

    Subscribe now

Other Editions that might Interest you

Do you have a valuable resource that you think others should see?

I do not take this list as complete, I will be growing it! Thus if you have any resources you would like to share then dm me on twitter @ByteBulletDev, mail me or be one of the first people who join my Discord server!

Here is what's in store to answer the question above (text highlighted red is a link):

• Why do I need a state manager?

• Recoil - atomic approach, created by Facebook, simple

• Jotai - atomic approach, more features than Recoil (out of the box)

• Redux - dispatch events which change state, a lot of boilerplate code

• Zustand - supercharged useState

• Hookstate - supercharged useState

• Mobx - pure JS with adapters for react, state in classes

• Effector - pure JS with adapters for react, create effects and dispatch them on stores

• Valtio - wrap your initial state in a proxy and then directly modify it, resulting in change propagation

  Share

Why do I need a state manager?

Let’s take for example a simple todo list app. One might not need a state manager if the app only creates, displays, edits and deletes (CRUD) the entries with an API. Everything can be done with a simple fetch and basic react constructs or to be future proof with react-query and it’s cache.

But imagine we want to add theme switching, complex notification system, undo/redo functionality or complete offline mode without an API. Each of these might require a global state depending on the use case and future plans with the app.

Adding global state is easy, reworking it is hard and removing it is fundamentally impossible.

I have worked on an app where Redux was used to only cache API calls and was intertwined with each aspect of the app. This would require a rewrite and refactor of each component in the app.

That is why I always use react-query as it satisfies 99% of all use cases. If it does not then I personally opt for context providers or atomic states (later on). But there are still use cases where robust global state managers are required. For example fully offline apps which do not sync with an API like an audio mixer, photo editor, simple note taking app, …

With everything out of my mind, let’s head straight into currently maintained and robust solutions for state management by implementing a simple counter app with each one of them.

Share

Subscribe now

Recoil

Recoil is a simple but powerful tool made by Facebook which is the first on the list that utilizes the atomic approach to state management. You crate atoms (separate atomic state values) and then use hooks which work like useSate, but propagate to each component that uses them.

Jotai

Jotai also utilizes atomic approach. It is similar to Recoil but offers more functionality thanks to it’s built in utility features (storage, async, SSR, …) and integrations (tRPC, react-query, …) this means that you can have same developer facing interface for state management and API’s.

Subscribe now

Redux

Redux was the go-to global state management library for a long time. But these days it requires more boiler plate code than others. It has reducers which are combined into one store. You dispatch actions, which are then caught by the reducers and they modify the state in the store accordingly.

They created redux-toolkit which mostly addresses the boilerplate problem, but still Redux requires quite a lot of setup in comparison to other libraries so I opted to link their example of a counter app implementation using redux-toolkit which will make more sense then me just showing here one component and an implementation of slice from redux-toolkit.

Zustand

Zustand is the weird kid on the block, but in a good way. It works by creating a store which contains values and modification functions. Thus the data is fully encapsulated. This is good because you have a consistent interface and you are less likely to duplicate code.

Share

Hookstate

Hookstate creates a state using the hookstate function. This store can be manipulated directly from outside or using hooks from inside react components. That is pretty much it. I strongly suggest you to take a look at the examples they give on their web.

Mobx

Mobx is also one of the older state managers. It is pure JS (can be used without react) and also has adapters for react. It utilizes JS classes which completely encapsulate the whole state. It is quite complex to show a fully self explanatory code example. Code is more than words. Go take a look at their website!

Effector

Effector works by calling events, which you define, that Stores subscribe to. It has pretty simple functional API even tho the description can be a bit intimidating.

Subscribe now

Valtio

Valtio is quite interesting as it utilizes a proxy around your initial state that can be modified directly. It is similar to the Zustand API but with one layer of abstraction removed. Each one has it’s use cases, so if you are deciding between these two, then I recommend to compare the docs directly.

What would you choose?

I would personally choose jotai as it offers both ease of use and extensibility via different integrations. What would you choose and why? Dm, mail or join my discord server, where we can chat directly!

It took me some time to gather this information and it would make my day, if you would join my newsletter! ♥️

If you have any tools, topics, library you would like to see featured, or just want to say hi, then consider joining my discord server, dm or mail directly.

Without further ado, let’s shoot straight into this weeks edition!

A question that sparked this edition and more editions to come when I was having a beer with friends last week. In this issue, we are going to take a look at my most favorite client side REST API stack implementation in React and Typescript.

Here is what’s in store today:

• Axios - API client that (almost) everybody knows

• react-query - powerful declarative caching enterprise level wrapper around API calls

  Subscribe now

Axios

99% of you probably know Axios, but I would describe it as the standard in current web dev when talking about API calls. It allows you to create a client instance where you define the API root with all of the necessary headers that you require to then simply reuse and create REST request just on the required endpoints.

Notable mention here is generic fetch function in JS/TS which is great for single use scripts where you don’t want to bundle in any other unnecessary dependencies to reduce the size of the script. But I would personally not recommended this for large applications as it lacks the nice to have features which Axios has.

Share

react-query

react-query + Axios is my go to stack for client side implementation of API fetching. It is beginner friendly and it allows you to completely ditch the global state which was the golden standard for some past years.

With react-query you create mutators (which do changes) and queries (which read data). You use and reuse these in combination with API request functions (can be fetch, Axios, or any other API client) which you define. It supports a fully fledged cache system with tag invalidation and pagination, suspense, query cancellation, optimistic updates, …

How do you replace the global state?

When you do a classic query with fetch you just take the data, push them through some logic, store them somewhere and maintain the state for next request, refresh… All this work to just work with an API and probably stored in redux and in a better case fetched with rtk-query which I controversially consider bloatware in new projects.

This creates unnecessary spaghetti code and the old looking JS-like typescript, promise nesting, etc… Nobody want’s this (Note: rtk-query is fine if you are stuck with redux in an old project)

This package brings cache into play, where you can define custom hooks to reuse the queries/mutators, which return the desired data from cache or fetch them if they are not in the cache. Then if you want to update the data, you create mutator, which invalidates the cache. If you use the query hook in 100 places then only one request is made and the data is then distributed among all of the hook calls.

Subscribe now

Give me the code already!

Using this approach you can completely build your app state management on react-query relying on cache, cache invalidation and on optimistic updates.

Note: react-query V4 enables by default tracked queries. This will result for useUser in notifying us when any of the fields data, isLoading, isError change

Did you like this weeks edition?

Do you want me to do this kind of write up style around packages, maybe even more often than once a week or just want to say “hi”? Then dm or mail me directly and consider joining my discord server!

Thanks for reading,
Tomáš Falešník

If you have any tools, topics, library you would like to see featured, or just want to say hi, then consider joining my discord server, dm or mail directly.

Welcome to this week’s edition of ByteBullet! This week we have a roundup of AI-powered developer tools and packages.

Here's a sneak peek of what's in store:

• magic - AI run-time code generation for TypeScript

• Sweep - AI powered junior developer that does the tasks which nobody wants to do

• Vercel AI SDK - toolkit which helps developers build AI products with React/Next.JS or Svelte/SvelteKit

• ai-pr-reviewer - automated GitHub PR reviews using GPT

But before we dive into this weeks edition, please consider subscribing and sharing this issue with your colleagues and friends!

Share

Magic

Magic is a tool that magically generates type safe functions at runtime in your code base. I personally think that this is a really cool usage of AI. The project was partially also generated by AI. But I would categorize Magic as an esoteric proof of concept tool. Give it a try and open a PR if you find any problems.

Sweep

Sweep is an AI junior developer that transforms bug reports & feature requests into code changes. You just simply add it to your GitHub repository and prefix your issues or PRs with “Sweep: “. Their pricing is also very generous compared to other AI tools. You get unlimited GPT3.5 tickets and 5 GPT4 credits which are used when a pr is created for example.

Subscribe now

Vercel AI SDK

Vercel AI SDK carries a very well known name “Vercel” and that also reflects the quality of the package. This package allows you to seamlessly integrate AI tools into your React and Svelte projects e2e. It includes integration beginning from Next.JS all the way up to React. So all bells and whistles included!

Share

AI Powered PR Review

ai-pr-reviewer is a GitHub Action that many people would find useful in their projects. It utilizes OpenAI to go through your PRs via GitHub Actions and summarize, find bugs, give line by line suggestions and much more. It also has incremental file reviews that save on cost, because only changed files are reviewed. Give it a try if you have your OpenAI API key!

That's it!

If you enjoyed this edition or want to suggest your package for next one then consider liking, leaving a comment or dm me on discord/twitter.

PS: We are going to be talking about ways and tools that can be used to implement client side API. Subscribe so you don’t miss out!

A word from me. If you enjoy my content, then let your friends or colleagues know using the button below. Me and your friends will greatly appreciate that because every developer will utilize this curated collection of packages and technologies!

Share

Welcome to this weeks edition of ByteBullet. This week we are heading into React Native territory but we still have great TypeScript libraries included.

Here’s a sneak peak of what’s in store:

• Solito - The missing piece for using React Native with Next.js to build cross-platform apps

• ts-rest - Incrementally adoptable type-safety for your new and existing APIs

• Nativewind - Use Tailwind in React Native to build cross platform apps using universal style system

• typed-memo.ts - The missing piece in @total-typescript/ts-reset which fixes generic type safety in React.memo

But before we shoot straight into this weeks edition, let me ask you a question:

Then do not hesitate to hit me up on twitter @ByteBulletDev or reply to this email directly!

Subscribe now

Solito

Solito is a cross platform framework targeting react-native + Next.js stack. It can be used to create cross platform apps. Solito was featured as #3 on the front page of Hackernews. It can be used in combination with Nativebase, Nativewind or other cross platform UI frameworks to build great and easy to manage projects.

This is a bigger project to fit into a simple code snippet, thus I advise you to take a look and give some luck to the Solito project by Fernando Rojo.

ts-rest

EDIT: We are going to talk about ts-rest project, which is a full ecosystem of packages which brings adoptable type-safety into your projects.

I have mistakenly addressed @total-typescript/ts-reset before which fixes several TypeScript typing issues. We are going to talk about it next Saturday!

ts-rest is an incrementally adoptable type-safety system for your new and existing APIs. This is not just one package, this is a full ecosystem with adapters built for many notable tools like react-query, solid-query, express, next and more… Take a look at the following code example taken from their website!

Subscribe now

Nativewind

Nativewind is a tool which uses Tailwind CSS scripting language to build a universal style system for React Native, which can also be used on web using a simple babel plugin. It can be also used in combination with Next.js.

The code example above (taken from their official website) can be simplified using babel preprocessor, which automatically wraps each component with the styled() function. Head over to their website and give them some love!

typed-memo.ts

And to finish off this edition we have a quick code snippet that @munigis suggested after @mattpocockuk created a pool asking:

If there was a ts-reset/react, what would you add to it? Top of my list is forwardRef, but I'm not sure I want to add it alone.

typed-memo.ts is a quick code snippet that fixes an issue that has been bothering react since the inception of React.memo. If you pass a generic to the component it will not give you type safe props.

In the code example above, the usage of name attribute will not be typed, unless you use the typed-memo.ts code snippet from above.

See you next Saturday!

Did you miss something? Want to talk about anything or just say hi? Shoot me a message @ByteBulletDev or reply to this email directly! ♥️

In this edition, we'll be covering the following captivating subjects:

• React TypeScript Cheatsheet - your companion for mastering React with TypeScript

• CSS Nesting - finally coming to native css!

• Prisma Pagination Extension - community driven extension that makes pagination in Prisma 100 times easier 🔥

• React Million - 70% faster react?

• ArkType - javascript runtime validation library that can infer TypeScript definitions 1:1

Before we delve into these exciting topics, don't forget to join the conversation on Twitter at @ByteBulletDev. Follow us for intriguing updates, engaging discussions on TypeScript and React, and much more. Feel free to drop us a message and be a part of our growing community!

Subscribe now

React TypeScript Cheatsheet

Ever for get how to use useRef and forwardRef? Do that no more! This simple yet comprehensive cheatsheet will be your go to source for the things you do not use that often. It can be found here.

Is SASS/LESS’s Time Over?

Native CSS nesting is a long debated feature (more on it here) which has been talked about even more recently. But will it replace the beloved preprocessors which we are used to?

Nesting in CSS preprocessors is one of the main features which help developers make readable and maintainable code. We must not forget that nesting is not the only feature CSS preprocessors bring us. Notable preprocessor features: functions, maps, mixins, ….

Bringing nesting in to native CSS is extremely useful, but it is still not fully supported. We will have to wait a little bit more to be able to fully utilize this over CSS preprocessors (caniuse.com/css-nesting)

Leave a comment

Prisma Pagination Extension

Prisma extensions are handy pieces of code which can be imported into prisma and used to simplify/shorten certain tasks for the end developer. Pagination is a known pain point for developers and thus this handy pagination extensions was made by the community.

It supports page number pagination and also cursor based pagination. It returns the need information by default (offset, nextPage, etc..). Basically it handles the most of the unwanted developer burden regarding pagination.

Million

I believe most of you have heard about million, the library that makes React 70% faster. I still want to share it with you as I think there might still a few people that might not know about it and could find it useful. I recommend either going to their homepage or this video from fireship.

ArkType

And to end this weeks edition on a weird note: ArkType, the JS runtime validation no-one asked for, but we still got it. This is a continuation of edition #01 on validation where we mention Typia, the runtime validation that can compile TypeScript types and use it at runtime. If you have missed it check it out!

ArkType is a run time JS validator which can 1:1 infer TypeScript types and reuse them as highly optimized validation. It has its own extended version of validation rules, that can be applied to types. As always, code is more descriptive than words!

Do you know any other notable library!

And that is a wrap for this weeks edition! If you know any other library, notable mention or want to just chat about TypeScript and React, then do not hesitate and hit me up @ByteBulletDev, at thomas@bytebullet.dev or here in comments!

Share

Leave a comment

Here's a sneak peek of what's in store:

• Strictly<T> - strict object type you’ve always wanted

• Prisma 5.0 - the long awaited speed bump

• Effect-TS - functional effect system for TS

• @badrap/result - result type taking cues from Rust and Haskell

But before we jump into these topics, I'd like to personally invite you to connect with me on Twitter at @ByteBulletDev. It's the place where I share intriguing updates and engage in discussions about TypeScript and React. Feel free to hit me up!

Make it Strict

You would expect the following code to compile with an error, because the returnWhatIWant function expects to return at least Doggo.

The code works without any problems. Imagine we are not returning a dog but crucial user details, then this could result in data leaks. This is where the Strictly<T> comes in handy.

I have to leave a note here. If you have any sensitive data or data that you are not 100% sure about, use a validator like Typia, zod or yup. If you have not heard about Typia then checkout my previous edition!

Prisma 5.0 speed bump

This week version 5.0 was released for the prisma project. It brings many features and improvements with the main highlight being the long awaited speed boost. They have achieved it thanks to replacing the GraphQL like protocol between the prisma client and query engine with jsonProtocol.

Sadly I cannot fit in all of the changes, so here is the whole changelog.

Subscribe now

Effect-TS (Haskell again?)

Functional paradigm is a powerful toy when used correctly. This is where tools like Effect-TS or TS-Pattern from my previous edition come in. Effect brings you, the programmer, ability to effortlessly handle async operations, manage errors, and compose complex workflows in a concise and type-safe manner. With improved testability and enhanced code maintainability, Effect-TS unlocks new levels of productivity for TypeScript developers.

Result<T>

And to finish this weeks round up we take a look at the @badrap/result. This Type removes all the hassle from exception handling. As always, code is more descriptive than words:

The Result type is smart and knows what you are accessing. You can see that if you access isErr, then the error variable is available. The same goes for the isOk value.

See you next Saturday!

If you want to reach me, hit me up on twitter @ByteBulletDev

• TS-Pattern - pattern matching in TS

• Typia - object validation against TS Interfaces

• react-charts - charts library from TanStack

• TypeScript 5.2 Beta

Typescript + Haskell = ♥️

I have stumbled upon a great library which helps with reducing the clutter that comes with messy switch statements and pattern matching. TS-Pattern is “The exhaustive Pattern Matching library for TypeScript with smart type inference.”

Typia

Take a Typescript interface and slap it against any object at runtime and tell me if they are equal. Forget yup, zod or any other validation libraries. There is a new kid around the block: Typia. It does exactly as said in the beginning and has integrations with Prisma (enforce max length of a string, email, etc…)

Charts, charts, charts…

Charts can be a bit of a pain point for a web developer. Thankfully libraries like Recharts exist. But this week I have tried react-charts from people at Tanstack. It allows you to quickly create powerful charts. Code has more descriptive abilities than words (at least in this case) so I recommend to take a look at this CodeBox example they have created.

TypeScript 5.2 Beta

Last week people at Microsoft announced the 5.2 beta of TypeScript. You can read more here. Quick summarization:

• using Declarations and Explicit Resource Management

• Decorator Metadata

• Named and Anonymous Tuple Elements

• Easier Method Usage for Unions of Arrays

• Comma Completions for Object Members

• Inline Variable Refactoring

• Breaking Changes and Correctness Fixes

See you next Saturday!

If you want to reach me, hit me up on twitter @ByteBulletDev

Subscribe now

Why?

Whether you're a seasoned developer or just starting your coding journey, our byte-packed newsletters will deliver a rapid-fire roundup of all things React and Typescript. Stay tuned as we aim to empower you with valuable resources, tutorials, best practices, and much more. Be prepared to level up your skills and keep your coding arsenal fully loaded. Subscribe now and get ready to experience the bullet-fast evolution of React and Typescript firsthand. Stay tuned for the launch of ByteBullet, your ultimate coding ammunition! 💥🔥

Should I subscribe?

It is up to you to subscribe now and unlock the power of ByteBullet! As a seasoned developer with 4+ years of experience in Typescript, React, GitOps/DevOps, and SRE, I've curated a newsletter that delivers the latest insights, news, and expert tips directly to your inbox. Don't miss out on the opportunity to supercharge your skills and stay ahead of the curve. Join the ByteBullet community today and ignite your coding journey!