Explain to me the setState. Hooks are now the better option to do effects in react. Using hooks with typescript can be complicated at first let’s dive in.

Image for post
Image for post

Inferring type

Typescript can gues types based on the parameters.

const [value, setValue] = useState("");   // const value: string
const [value, setValue] = useState(0); // const value: number
const [value, setValue] = useState(true); // const value: boolean
// const setValue: Dispatch<SetStateAction<State>>

Providing type

Type can be provided by useHook<type>(arg) syntax called Typescript Generics.

const [value, setValue] = useState<string>("");
// const value: string
const [value, setValue] = useState<number>(0);
// const value: number
const [value, setValue] = useState<boolean>(true);
// const value…

Image for post
Image for post

Developing amazing user interfaces does not come without obstacles let’s learn how to investigate and to resolve them with ease.

Image for post
Image for post

Debugging without IDE

The most used way to debug is simpleconsole.log but you can do better. At least you can use output objects or use console.table.

Image for post
Image for post
console.log objects or console.table for arrays or arrays of objects
Image for post
Image for post
Sarcasm

Using a debugger in chrome

Starting debugger without the use of breakpoints simply by adding a word debugger; in the code.

Image for post
Image for post

Start debugger only when conditions meet.

if (isConditionTrue) {
debugger;
}

Adding breakpoints in chrome

Placing a breakpoint in chrome Sources tab for a javascript file.

Image for post
Image for post
Adding a breakpoint and resuming the script execution
Image for post
Image for post

Serious debugging using IntelliJ IDEA

At first add extension JetBrains IDE Support to your chrome.

Image for post
Image for post

Start your project in chrome

Open extension by right-clicking on the icon and selecting Inspect in IDEA.

Image for post
Image for post
A javascript debugging session is running

The Javascript debugging session now ready in the IDE.

Add breakpoints and debug directly in IDE

Image for post
Image for post
Adding breakpoint and stoping the program on a breakpoint

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#React content.

React hooks are now preferred for state management. Calling setState multiple times in one function can lead to unpredicted behavior read more.

Image for post
Image for post

React State

Think of setState() as a request to update the component. Reading state right after calling setState() a potential pitfall.

Image for post
Image for post
Photo by freddie marriage on Unsplash

Most of the React components in our projects should be simple, reusable, testable and well-typed. Design components with well-defined properties that are easy to read and understand.

Enhance your developer productivity and experience. Use and promote relevant React abstractions and patterns formulated with the type-safety of Typescript. Types will help us avoid obvious problems in code. Tests for logic in the code are better than repetitive visual debugging.

Reason for type checking

The purpose of programming is to find a sequence of instructions that will automate the performance of a task for solving a given problem. Tasks are often created in distributed teams that need to communicate. …

Planning with development strategy is lowering the probability of delays or project failures. Examine some of the best practices that can help you deliver solid code with reduced effort and maintenance costs.

Know the language

The latest Javascript specification introduced useful syntax. It is recommended to use the default syntax over the previous unpure methods. Today you do not need Lodash, Underscore or Ramda most of the time.

Full Javascript course with examples, tips, and best practices

Image for post
Image for post
const, let | array methods map, filter, reduce | object spread, rest operator, destructuring

const, exceptionally let variable declaration

  • Will not pollute the upper or global scope, and const is signaling that the value will never change.

map, filter, reduce array…

Are you using React on the project with an external theme? Read more theming of for React, some hints for mobx without decorators and more.

Image for post
Image for post

This article is for anyone who is

  • working with React
  • is planning to start working with React in the near future
  • likes practical examples ❤️
  • uses Mobx

There are platforms that list thousands of generators namely yeoman but often you will need something simple and custom. The alternative is to use Hygen for generating custom project sections.

Hygen is using javascript for prompt and EJS for templating but is fully capable of generating code in any language.

Image for post
Image for post
Photo by Bank Phrom on Unsplash

Image for post
Image for post

No one wants to spend time creating boilerplate. Generating repeating code patterns can speed up development tremendously. What are the options? Read more to find out.

Choosing a generator and creating templates is an investment. Larger teams can experience faster development time and an increase of code consistency.

Code snippets

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional statements in the code editor.

Autocomplete will suggest a code snippet

Theming guidelines — Part 6 —React defaultProps Example

The previous article was about explaining why you should use components in defaultProps, now we try to create one as an example.

Image for post
Image for post
Photo by Jazmin Quaynor on Unsplash

Build a simple week calendar

Let’s assume we have a task to create a calendar that will display day names in header and boxes with actual appointments below.

Everything should start with a sketch

The minimal representation would be a bunch of headers and some other elements under each header.

Theming guidelines — Part 5 — How to solve the problem with components with a large number of props

Image for post
Image for post

I want to introduce you a technique called components in defaultProps. This technique will allow you to change every aspect of your components and make them ultimately reusable 🤯.

About

Marcel Mokos

I'm fanatic to next generation Javascript lambda, yield, async/await everything. I admire typescript and flow types. Javascript will ultimately rule the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store