With React 16.8, we don’t have to use “Class” based components anymore to use “state”. There is a new way to manage the “state” of a component. “this.setState” is replaced with “useState” hook and it is awesome! So if you really know how to use it…

Like the older way (before React 16.8), “useState” triggers a re-render in a component. Thanks to that, we can update a component and its content, style, elements, and other things. This is how React works.

const [state, setState] = useState(initialState);setState(newState);

The most important feature of the “setState” function is that if the newly…

How create a component dynamically? How to make a component generic? How to render a component from props? How to create a page from JSON? How to…?

Most of us know how to make a component with JSX syntax. This is very simple once you have learned how React works and what JSX is. Sometimes we need to create a component dynamically, although not very often.

For simple pages, we can create a structure to render the page dynamically. Even we can use this structure for forms.

We can do something like in the example below.

if(type === "text")…

There is a special prop called “Key“ in React but what is that? What does it do? Why should we know it?.

Every developer who works with React probably has already seen this error.

Most common error

What does this error really mean? It means React needs a unique “Key” prop to distinguish the items in a list. With that, React can decide which item is inserted, removed, or updated.

Let’s see this in an example.

Examples of Common-Wrong-Right Usage

1- Clicking on a “Red item” increases the “number” by 10.

2- Clicking on a “Insert to top” button inserts a new item…

With React 16.8 we have met with hooks and some methods that we have used before were replaced with them. One of those is “useRef”. There are 3 ways that are commonly used.

1 - What?

“useRef” is a hook which:

1 — can keep the values between re-renders. It has a “current” property that holds a mutable object.

2 — provides access to the corresponding DOM node which passed the return value of “useRef”.

3 — provides access to methods of child components with “useImperativeHandle”.

2 - Why?

1 — When the value of “useRef” is changed, it doesn’t trigger a re-render. So if you…

Since React 16.8 came into our lives, everything has changed a lot. With the concepts, we call “Hook”, writing components become much easier and more understandable now.

Now, creating contexts and accessing it very easy, and we don’t have to use “Redux” anymore. We can keep our user’s data in a context and get it in “1” line of code.

But, there is a very unexpected problem if you need to increase your application’s performance. …

Murat Güney

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