SolidJS vs. ReactJS

SolidJS: Solid is a JavaScript library for developing user interfaces that is declarative. It compiles its templates to actual DOM nodes and updates them with fine-grained responses instead of utilizing a Virtual DOM.

React: React is a JavaScript library that allows you to create user interfaces. When your data changes, it uses Virtual DOM to efficiently update and render exactly the relevant components.

Key features of SolidJS:

• It updates the real DOM with fine-grained data.
• Render once mental model: Regular JavaScript functions are used to create components that run once to make the view.
• Automatic dependency tracking: It is subscribed to when you access your reactive state.
• JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries, and concurrent rendering are some of the latest features.

Key features of React:

• Virtual DOM: UI Components are rendered and updated using virtual DOM.
• JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries, and concurrent rendering are some of the latest features.
• It is maintained by Facebook and its community

Basic Comparision between React and SolidJS

• Components:

• React: React components may be built with either a class-based or a function-based syntax. Components are JSX-returning functions.

//Functional component
const HelloWorld = () => <div>Hello World</div>;
//Class component
class Welcome extends React.Component {
  render() {
 return <h1>Hello World</h1>;
  }
}

• SolidJs: Only functional components can be created returning JSX.

const HelloWorld = () => <div>Hello World</div>;

• State: State is a simple JavaScript object for recording and reacting to user events.

• React: A state is just a simple object. The useState hook may be used to construct a state. The default state is sent to useState, that returns an array of state and state setter methods.

const Counter = () => {
  const [timer, setTimer] = useState(0);
  const increment = () => setTimer(timer + 1);
  // OR
  const increment = () => setTimer((c) => c + 1);
  return (
    <div>
      <h1>{timer}</h1>
      <button onClick={increment}>Click</button>
    </div>
  );
};

• SolidJS: state(signal) is created using createSignal hook. It returns an array of state(signal) and state(signal) setter function, taking default state(signal) as a parameter.

const Counter = () => {
  const [timer, setTimer] = createSignal(0);
  const increment = () => setTimer(timer() + 1);
  // OR
  const increment = () => setTimer((c) => c + 1);
  return (
    <div>
      <h1>{timer()}</h1>
      <button onClick={increment}>Click</button>
    </div>
  );
};

• Lifecycle: monitor and manipulate data

• React: Use effect hooks are commonly used to control component lifecycle.

const Timer = () => {
  useEffect(() => {
    console.log('I called onMount');
return () => console.log('I called onUnmount');
  }, []);
  return ...
};

• SolidJS: onMount(),, onCleanup() methods are commonly used to control component lifecycle.

const Timer = () => {
  onMount(() => console.log('I called onMount'));
  onCleanup(() =>  console.log('I called onUnmount'));
  return ...
};

• Refs: It’s a method of gaining access to DOM elements

• React: Refs are used to access DOM elements as shown below,

  const Timer = () => {
    const ref = useRef();
    useEffect(() => ref.current.focus(), [ref]);
    return <input ref={ref} />;
  };

• SolidJS: Refs are used to accessing DOM elements as shown below,

const Timer = () => {
 let ref;
 onMount(() => ref?.focus());
 return <input ref={ref} />;
};

• Props: how data is passed to components.

• React: Destructuring is possible for props passed as objects.

const Timer = (props) => {
  return <div>{props.timer}</div>; // Valid
};
const Timer = ({ timer }) => {
  return <div>{timer}</div>; // Valid
}

• SolidJS: Destructuring is not possible for props passed as objects.

const Timer = (props) => {
  return <div>{props.count()}</div>; // Valid
};
const Timer = ({ timer }) => {
  return <div>{timer()}</div>; // Not Valid
};

• Performance

Solid JS is faster than react and most other Javascript libraries currently available. This is mainly due to the principle of granular reactivity implemented in the same.

A comparison of the various Javascript libraries shows that Solid JS beats React JS in startup time, performance and memory usage.

• Community and ecosystem

  React easily beats Solid JS in this section at the time of writing. React has a much bigger ecosystem of third-party libraries, resources and tools. The Solid JS community, though smaller when compared to React, is steadily growing.

Conclusion

So that’s a brief comparison of SolidJS and React.
In terms of performance, SolidJS comes out on top but the biggest obstacle remains the widespread use of React and the ecosystem and resources associated with it. SolidJS has some catching up to do to match ReactJS in terms of community and ecosystem building.

At Dexlock, our team goes out of its way to provide our clients with the best services. If you would like to avail our services, you can connect with us here .