When I was learning React, the first distinction I remembered was between state and props. States are reactive, meaning they can be mutated and change how the UI becomes as the enclosing component re-renders. Props, on the other hand, are static, immutable properties a component acquires on mounting.
In the old Angular world I came from, I could do something like this:
<Component message={message} />
And internally, I could bind to this message
as it changed from the enclosing context and make changes inside Component
. This "portal" is a mean by which the outer context can interface with the otherwise encapsulated component, like a puppet being controlled by a puppeteer.
So when I learn that with a functional React component, I could do the same, I was pretty surprised. For example, to toggle a component "on" and "off", instead of doing this:
{ visible ? <Component /> : null }
I could implement Component
in a way that it accepts visible
as a prop and decide if it renders inside the component:
const Component = ({ show }) => {
return show ? <h1>Hello, world</h1> : null;
};
and use it this way instead:
<Component show={visible} />
Which I find much cleaner than the bracket evaluation because the interface is kept within the component. For example, instead of a simple visibility toggle, I could add a delay to the component showing and hiding, and this new feature will be implemented everywhere I use Component
:
const Component = ({ show, delay }) => {
let timer = null;
const [visible, setVisible] = useState(!show);
// Whenever `show` changes, call setTimer that delays
// the setting of `visible`.
useEffect(() => {
setTimer();
}, [show]);
function setTimer() {
// clear any existing timer
if (timer != null) {
clearTimeout(timer)
}
// hide after `delay` milliseconds
timer = setTimeout(() => {
setVisible(!visible);
timer = null;
}, delay);
}
return visible ? (
<h1>Hello, world</h1>
) : null;
};
// use
<Component show={visible} delay={300} />
This is probably not a big deal for elite React users, but for someone new like me, it's just awesome. I can't be 100% sure if this works in class-based component too.
Anyone know about this?
If you're interested in my non-programming thoughts, you can subscribe to my newsletter BETA School.
Top comments (1)
Yeah that's nice. React writing JS from JSX and what that means is mind bending to start with!
Just for reference you could write your return as:
Presuming visible can only be true of false. If it could be "falsey" then:
Also of course you could make it a wrapper around children - and then have a generic one if you prefer it to the inline syntax (and still do your delays etc)