Inna In Tech

After taking a break from writing, I am ready to get on track. A new article is coming 🤩🥳

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.

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

We all need a break sometimes and that’s okay.

The most important thing is not to feel guilty about it and give yourself time 📚🎸🤩

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

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 🤩

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

Learn ReactJs. Part 3 - you don’t need useState hook 🤯😱

Let me explain. useState is one the used and useful hooks, but unfortunately we tend to overuse it. It is amazing hook for managing state, but it is not an answer for everything.

✅ If you just want to remember some value and not to forget about that during re-renders, without rendering it to user -> useState is not meant for it, better choose useRef.

✅ If you have data in the state, but you want to modify it and get new values from it -> you don’t need to put keep that new values in the new useState object, simply create new variable and operate with that.

✅ If the component receives props and you want to get some specific data from it -> don’t put it in the state immediately, because very often you just don’t need it. As I mentioned before, just create a new variable and use that.

Keep coding and have fun 🤩

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

Sometimes you need that pop of colour in your life
Minimalism, neutrals, monochrome- great. But bright colours can give you a boost of energy. It works for me. 🤩

Find what inspires you, and keep coding!

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

useSate is the most popular and the most used hook, but it doesn’t mean, that you always need it.

useState is meant for managing state, for redrawing component depending on user’s interactions. If you want to remember something, but you are not rendering it, than you probably shouldn’t put it in the state. useRef would be the best option.

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

Fantastic book by David Allen, it is not the first time I am reading it, and I still find the answers I need.

But, of course, there is no magic; after reading this book, you probably will not achieve the desired results because it is not so easy to build a system that will work for you, and you will be able to stick to it. It takes time and you need to practise a lot.

I am still working on it, but I already see the results; this book helped me understand why I am ALWAYS thinking about my work tasks and trying to solve programming problems in my head. It was a huge relief when I realised the problem and slowly started to improve the situation—more about this book in future posts.

Keep coding, but remember to take a break 😎

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

Learn React, learn the basics. Part 1

What comes on your mind when you think about React?

I think about components and state management. Components are the base element of React, you can’t imagine coding without them.

When you have a component, you need to change its content depending on user interactions. Here comes the state.

More about managing state in React in the post.

Keep coding! 🤩

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! 🤩

„Clean Code“ by Robert C. Martin is one of the most popular books for the programmers.

There are a lof of useful advices, that can help you a better programmer, but only if you try to follow them. You should think about creating a new habit.