Let’s talk about the raw way of writing functions. Functions perform certain set of actions according to our requirements which could include fetching data, updating State, changing a set of mutable values and updating the DOM and so on.

And then our code base gets bigger and bigger and after a specific point, we have to deal with bugs. Arrrgh!

Fixing bugs most of the time is a tedious process because you have to go through potential culprits and sometimes there’s a lot! We fix them, then we have more bugs and the vicious cycle continues! At some point we might just look at our code base and end up saying this works although I don’t really know how! It’s Magic! :D

As the magician you need to have a clear understanding of the tricks you pull. And if you are going to refactor your code or write a fresh one you might need to think about the Application State Updates in your code.

Application State

An Application State is an entirety of all the values that define an instance of your program. Some of the values will be derived from this State like the dynamic button color or the Dynamic content inside a ‘p’ tag. The user may also continuously interact with the State using Events.

The State holds the most important values which if not handled correctly causes bugs. So may be directly mutating the State values everywhere is not such a good idea then.

How about keeping logic execution and State Updates separate?In other words, what if we divide our code base into Pure Functions and State Changes(a.k.a Side Effects)?

---

Functional Programming

Functional Programming is a programming paradigm where you extensively use functions and more importantly most of them are Pure Functions.

But before diving into Pure Functions, two things that need to be addressed are Side Effects and High Order Functions.

#programming #react #web-development #functional-programming #javascript