Context API is a feature added in Reacy 16.3 that allows to share states across the entire application.

Less prop drilling ( passing props down manually at every level )

particularly useful for managing global data that needs to be shared between multiple components

It can be useful as well to store data retrieved from external sources such as API or databases and make it available to all components.

s a component wrapped in the component tree that is responsible for providing the data ( state ) to its child components

 props, which is the data you want to share

typically you want to wrap your top-level component or a higher-level component with the context provider to make the data available to all its children components. Such as 

A component that consumes the data provided by the Context Provider.

will automatically re-render whenever the data it consumes changes to ensure it is up to date.

 accepts any kind of value ( even an object ).

Theming - change the appearance of your application from light to dark? put it into context so all its child components can update

Current Account - need to know the current logged-in user, and you need it for your components to use if the user has permission on the specific component

Routing - rerouting your user if it’s logged-in account has expired, or maybe you just want to redirect them to another part of your site.

Managing States - or you only want to pass some state to a lower component or maybe parent component?

https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context

How to use React Context API ( Theme toggling)

Let’s create a Theming Context that toggles our app theme from dark to light mode.

 - custom hooks that access theme and toggleTheme function.


 - component that will wrap in our application that will provide the theme state and the toggleTheme function

Use the Theme in our MainContent component

https://codesandbox.io/s/react-context-api-5pjh9p

Learning React Context API

Literal types allow you to define exact values that a variable or property can take on.

by combining literals into a union, you can express a more useful concept

This feature provides more PRECISE TYPE CHECKING and helps enforce STRICTER constraints on the values that can be assigned.

literal types can also be used in combination with union types to create more complex constraints.

Using literal types, you can define and enforce specific values, making your code more EXPLICIT and catching potential errors at compile-time.

Literal Types allow you to SPECIFY that a variable or parameter MUST HAVE A PARTICULAR value

TS Basic: Literal Types

Sometimes you will have information about the type of value that TS can’t know about. Type assertions are used to explicitly specify the type of a value when the TS compiler is unable to infer it automatically.

They are simply a way to provide hints to the TS compiler for type checking during the compilation process

TS Basic: Type Assertion

After 4 years of Front-end Development, I decided to update my old portfolio website. 

For my new portfolio website, I planned to incorporate Nextjs and Sanityio. Additionally, I aim to include a feature where I can share updates on my web development journey, including blogs and showcase my work.

I am currently updating my portfolio website after three years of working as a front-end developer, utilizing ReactJs and NextJs.

Hi, I'm Owa Aquino.

👉 This website is here to help me become a better developer.

💻 What I'm working on

Portfolio v3

📝Latest Posts

Learning React Context API

TS Basic: Literal Types

TS Basic: Type Assertion