We’re building core accounting software, with enjoyable modern user-experience, efficient financial statements and KPIs and more workflow automation. — Bigcapital.app

Managing the finance of any organization is a crucial activity for business owners and accountants. Most accountants automate their repetitive tasks by software, covering areas such as A/R, A/P, transaction categorization, syncing transactions from different apps, and closing books to ensure accurate financial statements.

This is why accounting software is still one of the oldest and most popular types of software created. Many leading software solutions on the market were developed over a decade ago using old technologies, and the core accounting have not evolved significantly since then, despite tremendous evolvement in A/R, A/P, and payroll technologies.

What makes Bigcapital vastly superior to others:

• Deliver an exceptional user-experience, by prioritizing application performance and UI/UX, that kind of tool suppose to be used multiple times a day from business owners and accountants who support other businesses. should be a simple and fast to navigate.
• Better financial statements, reports and analysis KPIs, the best accountant software that gives top executives the concluded image about the current organization financial position for making better and faster decisions through realtime reports.
• Automate the manual tasks and optimize the workflow, one of the daily critical accountant tasks categorize the transactions that coming from bank accounts and credit cards, sending invoice reminders, etc. that kind of daily tasks can easily automated programmatically or AI.
• Integration with other systems, ability to integrate the accounting software with other sales, payments, bank accounts and credit cards to sync transactions automatically to the backbone accounting system, This automation significantly reduces the effort required by accountants to close books and ensures accuracy in financial records.
• Self-hosted & Cloud Accounting, let users host their data on their own servers and develop additional features and integrations based on the core functionalities. Bigcapital Cloud offers the convenience of using and accessing financial data without worrying about infrastructure setup.

Bigcapital Cloud is the easiest way to run Bigcapital. Sign up and shareyour feedback with us through our community.

You can also install and self-host Bigcapital Community yourself since it is open-source. With 2,300+ GitHub stars, Find the instructions.

— Ahmed Bouhuolia, CEO & Founder of Bigcapital

Digging deep inside the stateless and stateful React components.

If you have been using React some of the time you must have heard about controlled and uncontrolled components.

As we know there are two directions for state flowing between components the down-to-up and up-to-down.

The down-to-up (from child to parent component) is more straightforward and always can be done by callbacks, the down component triggers a callback and the up component listens to it.

The up-to-down direction (from parent to child component) can be done by passing the state to the prop of the child component, once you mutate that state, the behavior of the child component should change, that might be a bit tricky than the first one.

Controlled Component.

The controlled component is the component that its main state is controlled from outside.

Technically is the component that takes its current value through props and triggers changes through callbacks like onChange.

A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.

Example

Here’s a working code of a controlled component where we have displayed text.

Let’s understand the important aspects of controlled components from this example —

• When the input change occurs, the input element fires the event handler onChange and passes the new value of the text input.
• The external component receives that new value through onChange listener and and passes the new value to the parent component state.
• Then the parent component which is ParentComponent passes the new state to the child, because the displayed message comes from parent state.

The state flow is unidirectional from the component with external components.

You can call it a Stateless component because the component doesn’t store or hold the main state inside it and is state-controlled from the outside.

Uncontrolled Component.

An Uncontrolled Component is one that stores its own state internally.

Usually, that type of component has initialValue prop just for passing the initial value of the state in the first rendering, but won’t be able to control the internal stored state in the further mutations.

Example

Here’s a working code of an uncontrolled component where we have displayed text.

If you look at the code the state flowing as the following.

• The initialValue prop just for initial value of value state, if you mutated that state from outside the value state won’t change.
• The parent component can listen the child component by onChange and the callback passes the new value of the child component.

An Uncontrolled Component should be a Stateful because the component stores and holds the main state inside and the main state is uncontrollable from the outside.

Controlled & Uncontrolled Component.

If you have gone through controlled and uncontrolled component you may have already guessed when we should use controlled or uncontrolled component, actually that depends on the use-case of that component.

It’s preferable to build components to be controllable and uncontrollable at the same time out-of-the-box, which will give flexibility to the end user to choose between two approaches.

Let’s refactor the component that we already wrote to be controlled and uncontrolled at the same time.

Let’s review the major aspects of the code.

• If the user passed any value to the value prop the component will convert to be controlled from outside. and that is obviously done by the condition on the localValue variable.
• The uncontrolledValue state holds the inner component’s value and that state will be neglected if the user passed a value to the value prop because the component will take localValue state from value prop.

Refactor the Component to be Reusable Hook

We want to build a custom hook to be more reusable and and that hook should receive 3 main inputs which are the value, initialValue, onChange we need all these props for any component either controlled or uncontrolled.

And the hook should output localValue and onChange, the localValue represents the local state of the component and might be from the value prop (in case controlled) or from the uncontrolledValue (in case uncontrolled).

Let’s use that hook in the real world.

— —

Want to Connect?
Twitter: twitter.com/bouhuolia
Github: github.com/abouolia
Email: a.bouhuolia@gmail.com

There’s been a question in mind for a long time, what differentiates React Context API (the React-backed state management) from other state management tools like Redux or Recoil internally.

If you take a look at the documentation of these tools you will see something in common, which is these tools are more adequate for an application that has a global state that mutates frequently.

Redux and Recoil for example keep telling their users constantly you might don’t need to use our tool if you have a small application with small amount of components, and their state doesn’t mutate frequently, here might be the Context API a good fit.

As you know Context API is not great in terms of performance, for a simple reason, when any state in Provider is mutated all sub-components under the Provider will re-render.

Which makes relying on Context API as state management is absolute harsh cause hurts our application performance. if it was a use case like theme colors as a static state that would be a great use case for Context API.

Every React component re-renders automatically for simple three reasons.

• When the state of the component mutates, even if that state is retrieved from custom hooks like useQuery() or useContext().
• When the properties of the component are mutated.
• When the parent component re-renders it forces all the children components to re-render, especially if that subcomponent wasn’t wrapped with the memo function.

Unnecessary re-renders affect the app performance and cause loss of users’ battery which surely no user would want. Let’s see in detail why components get re-rendered and how to prevent unwanted re-rendering to optimize app components.

Redux and other state management tools like Recoil tried to build an optimized Observer system out of React.

Some tools have different terms and different data structures like Recoil relay on Graph and Set and Redux is more Plain Object oriented with more advanced reducers for complex mutation.

Observability System

If we look at the Observability system as a big picture, the Observability system is a design pattern, holds state and observers (some called them subscribers) as callbacks and the system notifies these registered observers automatically when the state mutates.

The Observer design has three main components: the state or data of the instance, the registered subscribers/observers as stacked callbacks, and a mutator which you can mutate the state, the mutator doesn’t just mutate the state but also tries to notify all registered subscribers/observers when the state is mutated.

It’s quite different from the publish/subscribe system that allows the design to define specific events that you can send custom arguments or different events that contain values that you need to the subscribers.

We’ll try to implement the Observer System and bind it with React in the next chapter.

Building Observability System

Talking theory is great but let’s talk about implementation. As we mentioned before the Observer has three main components: the state, mutator, and subscriber/observer.

Obviously, the subscriber is a callback that receives one property reference (the new state), so the Observer interface should have these basic methods that we need to mutate, subscribe and retrieve our state.

The basic flow of the Observer goes like this,

• The getState() method just returns our state.
• The mutate() method mutates our state (e.g. the new user is submitted via the input) and then runs notify() to notify all registered subscribers callbacks with passing along the new state.
• Thesubscriber() where you can register our subscribers or callback to listen when the state mutated.

I know for sure you’re wondering how to bind that with React to communicate with our React components. We will discuss that in the next chapter and in that chapter.

Binding Observability System with React

Recoil tried to merge the Observer system and React Binding API in the same library, and other tools like Redux tried to separate the concept Redux as state management and observer in a package and React-redux that bindings Redux to React in a different package.

<ObserverProvider>

The ObserverProvider that provider will flow the observer class instance to all sub-components. And that provider accepts initialState property to inject an initial state to the Provider that would be passed to Observer.

The observer instance here injected useRef to avoid any interactive with React reactive system. useRef doesn’t notify the component when its value mutates and that doesn’t cause any re-rendering even if the ref value mutated.

useMutate()

Basically, the mutate hook useMutate works as a setter function for our state, retrieved the observer instance from the provider, and used the mutate method to send the new mutated state to the observer.

If you noticed here we wrapped the arrow function with useCallback to avoid re-creating a new function every time when the hooked component re-renders.

useSelector()

Obviously the selector hook useSelector works as a getter function for our observer but with some differences.

Try to sync the observer state with our React local state inside the hook and that gives the ability to communicate and interact with the hooked React components.

In the first line, we injected the initial state of Observer to React state and then we subscribed to Observer to listen when the state be mutated, and wrapped the subscribe inside useEffect to avoid any revoking when the hooked component re-render, eventually retrieving the React state.

If you tried to reverse-engineer the most popular React state management tools how they work, you will see their core design centered around that design pattern, some tools have advanced features like reducers to manage mutation complexity in Redux and selector graph dependency in Recoil.

Resources

Observer (refactoring.guru)
Complete code of the article

Want to Connect?

Twitter: twitter.com/bouhuolia
Github: github.com/abouolia

How Do React State Management Tools Like Redux, Recoil Actually Work? was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.