Inna In Tech

Components are the base element of ReactJS. We all know how easy it is to use components for building UI. It is like playing with LEGO bricks. But unfortunately, it doesn't look so convenient when you make your component too clever. It is important to remember that too much business logic makes components unreusable and firmly tightened.

Sometimes I see how developers, for some reason, create very complex components, trying to put all possible logic in it. However, they could divide it into multiple parts and reuse them in other components. I don't know why sometimes we are afraid of having a lot of "dumb" components that would be used for presentation because it is the React way.

Please keep things simple; remember to review your components, extracting reusable parts.

#программирование

Learn ReactJs. Part 4 - updating arrays in state.

Updating arrays in state may be tricky. Why? Because you need to treat them as read-only objects, you can’t directly modify the array from state.

What can we do?

✅ Use methods, that return a new array (concat, filter, map, slice, spread operator)

✅ Create a copy of the array from state and than change it

You can find more about updating arrays in the post.

Keep coding and have fun 🤩

#программирование

When to use useReducer?

Oh, you will feel it. I know it’s a very weird answer, but that’s how it is 😱

I get this question very often, because sometimes programmers are a bit afraid of using useReducer. It looks complicated and defining reducer function stresses them out 🤪🤯 I really don’t know why 😅

In reality that’s not so complicated. Syntax is very similar to useState, but in this case you should provide a function, that will calculate state, depending on passed action.

📚 const [yourState, dispatch] = useReducer(functionToCalculateState, initialState);

You can look at useReducer hook as a set of instructions of how your state will change depending on actions :
action ➡️ result

For example:
loading ➡️ showing user that data is loading, hiding error messages, data is empty…
loaded ➡️ showing user loaded data
failure ➡️ showing error messages

For calculating new state we need to define a function, that gets the current state, action and returns the new state. To call reducer function you a have a setter - dispatch.
✅ dispatch({type: „yourAction“});

That’s all, you just need to experiment with useReducer and you will see how amazing this hook is.

Still, I recommend starting with useState, and when you feel that it’s becoming uncomfortable to manage state through multiple setState setters, then you must try useReducer. But it is important to try both variants to feel the difference.

Keep coding and having fun 🤩

#программирование

I have been mentoring new React developers at work for three years now and I see, how important is to learn the basics.

You can’t even think about using any state or form management library if you don’t know what is the difference between controlled and uncontrolled components, how to correctly manage arrays in the state and when to use useRef hook.

It is awesome, that we have a lot of different libraries, that can help us be more effective at coding, but it is much better if we understand how it works.

If you are interested in learning React, stay with me, there will be a lot of useful information about React.

Keep coding! 🤩