DEV Community: Sheila Kabiro

Understanding state and props in React

Sheila Kabiro — Fri, 02 Feb 2024 09:01:27 +0000

State and props are two essential ideas in the world of React that are crucial to creating dynamic and interactive user interfaces. React's component-based architecture is based on these concepts, which allow programmers to write reusable, modular, and maintainable code. We'll go on a journey to understand the relevance and smooth operation of React's state and props, simplifying their enchantment in this article.

The Role of State:
What is the State?

At its core, state in React represents the local mutable data that a component manages. It is what allows a component to keep track of information that can change over time – from user interactions, API responses, or any other dynamic aspect of the application.

Class Components and State:
Traditionally, class components were the primary way to manage state in React. The setState method played a crucial role in updating and re-rendering components based on changes in state. Understanding the component lifecycle methods became essential to grasp the intricacies of managing state effectively.

Introducing Hooks:
With the advent of React Hooks, especially the useState hook, functional components gained the ability to manage state. This simplified the state management process, making code cleaner and more concise. No longer bound to class components, developers could harness the power of state within functional components effortlessly.

Key characteristics of state:

Internal to a component.
Mutable: can be changed using setState.
Represents dynamic data that affects the component's behavior.
Example: Clicking a button in the Counter component might call setState to increment the count.

The Significance of Props:
What are Props?
Props, short for properties, allow components to receive data from their parent components. They are immutable and serve as a way to pass information down the component tree.

Passing and Receiving Props:
Props are passed from parent to child components, creating a flow of data within the application. This unidirectional data flow ensures that child components remain predictable and easily maintainable.

Key characteristics of props:

Passed from parent to child components.
Read-only.
Used to configure a component's behavior or appearance.

The Yin and Yang of React Data Flow
Interaction Between State and Props

Props and state work together seamlessly to create responsive and dynamic user interfaces. Props provide external configuration, while state manages internal data changes. Here's a helpful analogy:

Props are like the recipe: Just as a recipe provides instructions on how to bake a cake, props in React provide the necessary information for a component. They are passed down from parent components to child components and are immutable within the component receiving them. Props define what a component should render and how it should behave based on external input.

State is like the ingredients: While the recipe (props) provides the blueprint, the ingredients (state) are the dynamic elements that can change the outcome of the cake. State is internal to a component and represents its current condition or situation. It can be modified by the component itself through setState(), leading to re-rendering and updates in the component's UI.

Common Use Cases: When to Use Props vs. State

Use props for data that comes from a parent component and shouldn't be changed by the child.
Use state for data that is internal to the component and can change over time.
Props are ideal for static configuration, while state is perfect for dynamic behavior.

Anybody starting to build modern web applications needs to understand state and props in React. Developers may design dynamic, interactive, and maintainable user interfaces by grasping these concepts. Remember that state and props are your buddies when you start your React journey; they will enable you to easily create applications that are reliable and scalable. Happy coding!

LESSONS I HAD TO LEARN THE HARD WAY

Sheila Kabiro — Tue, 31 May 2022 11:09:45 +0000

I’ve been into coding for the last 3 years now. I’m far from an excellent developer, but I’ve definitely learned some things about being an average one. ? or so I think. A lot has changed about me and I want to believe that code has changed me. In programming, there are many lessons to be learned from experience. I had to learn the following lessons the hard way and sharing them here is the least I can do.

No one knows everything

From searching for solutions with my lectures on the internet to sharing ideas with senior developers and teammates, I have come to conclude we can’t know everything in coding. There is so much more to being a developer than knowing by heart every line of code that there is. It doesn’t matter if you know the little things, they are a google search away if you forget them.

How to Improve on This?

Improve your problem solving skills
Improve your teamwork and communication skills
Increase your Knowledge of programming concepts and frameworks
Clean code should be a main focus
Create an Outstanding Portfolio
The great thing about being a developer is that you don’t need to know everything. You only need to know how to solve problems.

Having bugs is essential to learning

The Bugs I experienced in 2019 are now almost a walk through but what am learning today seems to be so challenging that I sometimes feel like giving up. In Coding you must come across bugs, how you debug your code is what matters.

“Don’t even start considering solutions until you understand the problem. Your goal should be to “solve” the problem mostly within the problem domain, not the solution domain.” — Oz Nova

DTIW ( Don’t touch, if it works )

Don’t touch your code if it is working, especially in your testing phase or when you do practice.

Think Twice, Code Once

Before writing any code, I have trained my mind to think about the code and write it down in pen and paper if I have to. After getting a solution or approach to the code, I then get confident to write my code. Test driven development promotes this greatly as you have to think about what functionality you expect and how it’ll work. You can’t freehand the code when you have to plan it ahead of time.

Googling is a legitimate skill

Coding is all about finding solutions and Google has it all. Improving your skills on searching, saves a developer a lot of time. Sometimes, you need to find a solution to a problem you don’t even understand. But thankfully, Google has the answer somewhere.

A Good Programmer Looks Both Ways Before Crossing a One-Way Street
The best software can handle all errors, and I mean all. Even those that “will never happen.”

Most software is written to carry out the “good flow” in which everything works as expected and the user doesn’t do weird stuff. The real world is messy, and over time, stuff that can possibly go wrong will go wrong. Try to catch as many errors as you can — especially when your software is fulfilling crucial functionality. Remember If you find software or application that has low or reduced performance, you will find that it brings your reputation down in the market. Users are not going to trust any people. There are chances that the reputation of your organization is going to suffer.

Measuring Programming Progress by Lines of Code Is Like Measuring Aircraft Building Progress by Weight -Bill Gates
Writing more code than others does not mean you’re more productive. The best code uses the least amount of lines to get the job done. However, this code is also the hardest to write. Most people thing programming is just writing code and making it happen just like in the movies.

KISS(Keep it Simple Stupid). Don’t write a code that is super complex and hard to understand. Keep it as simple as much as you can.

How to be the best?

One Advantage of being in the Tech industry is the freedom to live in the Internet. You get different resources and communities that shape you to be a better developer. Developers are different. We love to write code. We love to build the next biggest things using code. Twitter, Instagram and Pinterest are a few examples of code that has changed the world. But there is a dark side to that. Writing code requires countless hours sitting in front of the computer and hence we do not spend enough time to socialize and to network. Many of us also build ego or pride. We live in our own little world. Many of us are not so social and have a shy nature. And many of us just don’t know where to go and find the right network. If you want to grow out of being a developer and want to become more than that, CTO or manager, or even start your own business, you will need to think and act differently. You will need to give up your pride and/or ego.

Finding a mentor is the key. Mentorship is the best way to get on the track. For a mentor, you must find somebody who believes in you and who sees your potential beyond you. Once you find the right mentor, you must respect their opinion and guidance. When reaching out for help, you should be very polite. Remember, you’re in need. There are chances you may not get any response or help for a while or maybe never but don’t be discouraged. Find somebody else and keep trying.

Remember, even though most successful people are willing to help, they are usually very full of activity. You’re not the only person contacting them. For you, your need may be the most important task but for them, it’s not. Try to fit into their shoes for a moment.

So, how do I ask for help?

The best way to ask for help is try to build a relationship. You can’t just randomly go to somebody you have never met and ask for help. The chances of getting any help are very slim. But if you introduce yourself and be polite and listen, learn and get a temperature of the person and politely ask when the time is right.

So there you go fam, 8 lessons I have had to learn in the last 3 years. Has it been easy? Clearly no still isn’t but its the bugs that make us know how to solve something. Keep on pushing, Don’t Complain