Routing & State Management - HeartUoA/HeaRT GitHub Wiki

Routing & Navigation

Routing in HeaRT was created through the use of React Router, a routing library built on top of React. HeaRT is a multi-page web app, which allows the users to navigate to the different parts of the web application using URLs.

State Management

HeaRT is a stateless application, using only local state within the components and pages themselves. Local state management for HeaRT is handled through React Hooks, as opposed to React's class components and Redux. There were several reasons for this decision. The first being that we did not want to have to install any more dependencies than we needed to. For example, there were too few cases where a "global state" was required that justified the use of Redux and that we believe that Redux was unnecessarily complicated for our purposes. In the few instances where a "global state" was required, the same, if not more efficient solution could be provided through React Hooks and Contexts, which utilises another advantage of Hooks, the ability to reuse stateful logic between components.

With React class components, methods within components cannot be reused by other components unless being passed down from a higher-order component, which can lead to a "wrapper hell" of nested components. Through Hooks, custom hooks can be created with reusable methods that can be used by different components without a complex component hierarchy.

Furthermore, React Hooks provide more control over a component's lifecycle. Class components have methods that run during specific periods of the component's lifecycle, such as componentDidMount() and componentDidUpdate() but this may combine functionally separate logic into a single method. The useEffect() hook allows a component to be split up into smaller functions, based on what it is doing rather than a lifecycle. The useEffect() hook also allows methods to be run only if a certain state is updated. This can lead to cleaner and more efficient code compared to when using componentDidUpdate(), which will run if any of the props or state of the component is updated.