Aug 25, 2022
ReacType 13.0 — React State Management and Prop Drilling Made Easy
Your favorite React prototyping tool just got better with some special new features
Do you spend hours prop drilling within your React application? Have you been told to abandon it altogether in favor of a hefty, state management library?
Prop drilling is often criticized due to its cumbersome attempt to solve a ubiquitous problem amongst React developers — managing state within an application. It is difficult during development to determine whether you are:
- Over-passing props
- Under-passing props, or
- Losing track of props somewhere in the prop drilling process
Despite the numerous, state management dev tools available, prop drilling is still a valuable architectural solution for many React applications. With ReacType 13.0, this process has been simplified and made to be completely intuitive; Creating a much friendlier development process when prop drilling and managing state.
What is ReacType?
ReacType — Your one-stop shop for all things React! ReacType is a standalone application built on Electron. It’s a powerful prototyping tool, allowing you to initialize React components that can contain various customizable HTML elements and/or other components.
It provides you with a drag-and-drop canvas as well as a demo render to see the result of your actions, and a tree graph to see the overall structure of your app at a bird’s eye view.
Additionally, ReacType makes coding easy with a live code preview of your customized components, and the export code feature which allows you to export your components and produces the scaffolding of your React application.
ReacType has a vast array of tools at your disposal to plan and get your next React app started.
So what’s the big deal with ReacType 13.0?
Creating a great application isn’t just about the looks, it’s about the functionality:
Enter ReacType 13.0.
In the earlier versions of ReacType, the state was only available statically in the customization of the independent components. Then, later on, developers added the Context Manager feature which gave you the ability to define state via the React Context API for a more global approach to state management.
Today, ReacType 13.0 has taken manipulating state one step further, by adding even more flexibility with state management and opening a wider array of options for developing your applications.
NEW! Introducing ReacType 13.0
With the release of version 13.0, we’ve overhauled how ReacType manages state within your React components. In the State Management tab, you can find new functionality such as:
Create/Edit State
- Manage state locally: You can initialize the state with React hooks in the Create New State section. When the state is created in a component, the state and its setState function associated with it are readily available to pass down to its child components.
- Add/delete props: Passing down props to multiple components can be a time-consuming process. With ReacType 13.0, you can easily pass and delete state, or props, through deeply-nested components; Prop drilling is as simple as clicking a button!
- Dynamic state editing: If state or props are deleted upstream from the parent component, it will automatically update the state of its children components.
Display Tab
One of the biggest pain points of prop drilling is keeping track of state, especially within nested components. With the new Display tab, you can quickly view a tree diagram of the application’s component hierarchy. In ReacType 13.0, you have a clear, visual overview of how the state is being passed from component to component in the application. Clicking on a node will display props passed down from its parent component, as well as the state created in the clicked component.
Putting everything together, now you can make stateful applications in a matter of minutes.. anyone up for a game of tic-tac-toe?
Additional Improvements
Along with these new features, we’ve made many additional functionality enhancements to ReacType 13.0. These include:
- Code Preview: Code Preview is now integrated with the new, powerful state management features and will update your exportable code in real time, so developers can quickly spot-check what is happening in the application.
- Next.js and Gatsby Compatibility: Next.js and Gatsby are now compatible with the new state management tab, code preview, and exporting code.
- Improvements to Export Code: Exported code dependencies have been updated and will now run and render straight out of the box.
- Revamped Tutorial: Tutorial is functional and has the latest guides to navigate through the newly added state management tab.
- Windows Compatibility: ReacType 13.0 is now compatible with Windows.
- Web-version available: ReacType 13.0 is now available via the web browser (beta).
What’s Next with ReacType?
Here’s a short, non-exhaustive list of features we’re excited to integrate in future iterations of ReacType:
- Adding on-click functionality within components.
- Incorporating Material UI as additional elements on the side panel to add into the components.
- Enabling auto-save functionality when dragging and dropping components, and when updating component state.
- Allowing users to click and access other projects within the dashboard for review.
- Further development of the ReacType web browser platform.
- Enabling Google OAuth across all platforms.
- Compatibility for Linux users.
Get Involved!
Eager to try it out yourself? You can download ReacType by visiting our GitHub, or visiting our website where you will find all the information you need to get started. We are always looking for ways to make ReacType better, and we would love to hear from you! Please submit any issues or contribute to the open-source project on our GitHub.
