Mfcttrf

What is the correct way to change checkbox value?

option 1

import React, useState from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() 
 const [x, setX] = useState(false);

 const soldCheckbox = ( target: checked ) => 
 console.log(x, checked);
 setX(checked);
 ;
 return (
 <div>
 <input type="checkbox" checked=x onChange=soldCheckbox />
 </div>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

option 2

import React, useState from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() 
 const [x, setX] = useState(false);
 console.log(x);
 return (
 <div>
 <input type="checkbox" checked=x onChange=() => setX(!x) />
 </div>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In fact, I think there's no difference, but I just wanted to hear a different opinion. Maybe something I do not know or there may be other solutions to this problem.

I think that it all depends on the situation.

The first option will be better if you have a lot of form and components. You can handle all with one handler.

const handler = (e) => 
 const target = e;
 const value = target.type === 'checkbox' ? target.checked : target.value;
 const name = target;

 setForm( f => ( ...f, [name]: value ));
;

Second, if checkbox is one and the application must somehow react to its change.
there is a third way to uncontrolled inputs.

Both ways are almost the same, but the first option actually is more redundant, let's analyze why:

Both the first and second methods are implementing controlled components

This means that you are providing a value and a way to change it, so the responsibility to update and control the values are abstracted from the component.

But why the first way is redundant?

You don't actually need to read from the e.target.checked cause it always reflects the local state x, so there is no need to read from e.target.checked and reverse it by doing: setX(!e.target.checked) since x and the e.target.checked will always be the same.

Caveats

Even though is fine to do onClick=e => parentHandler(e) in a inline expression(arrow function) you should be careful, passing it like this to an input won't cause any problems, but when you are passing to a child component that implements React.memo or PureComponent for example, this will actually re render the component everytime, cause a new instance of the function is always created (signature is the same, but the shallow comparison will always return false cause they are different instances), so for optimization reasons is always best pass props like this: <Child onClick=this.clickHandler id=item.id /> and on the child: onClick=() => this.props.onClick(this.props.id) instead of just: <Child onClick=e => this.onClick(item.id) />

In this specific case, I would have chosen option 2, cleaner code in my opinion.

setX changes the state, no need for a function calling setX and extracting the value from event if we know the value is x.

The only difference is clean coding, first way is better if you need to do something except changing state (for example to call an http request) and the second is good if you just need checkbox to work and store its value.