Non-state variables in Components

[mikekasprzak]

I'm afraid I can't remember where I read this, but it's been bugging me. I need a sanity check. 😅

The other day I stumbled across a comment in Preact internals discussion suggesting you can only store values in a component's state, and the reason was something to do with the component forgetting it. That made no sense to me. It's possible the writer misspoke or the context was DOM, I'm not sure. The problem is I don't really see this documented anywhere (though it pops up in ref), and admittedly I always blindly extend from Component and don't actually know if there's something clever going on under the hood.

Here's a short example that stores values inside the component instance other than state.

import {h, Component} from 'preact';

const SOME_CONSTANT = "Is it four?";

export default class MyButton extends Component {
	constructor(props) {
		super(props);
		
		this.state = {
			'isFour': false
		};
		
		this.cached = null;
		this.hardWork = this.hardWork.bind(this);
	}
	
	componentDidMount() {
		this.hardWork();
	}
	
	hardWork() {
		if (!this.cached) {
			this.cached = {'complicated': 2+2};
		}
		
		this.setState({'isFour': this.cached.complicated == 4});
	}
	
	render({}, {isFour}) {
		return <div onClick={this.hardWork}>{SOME_CONSTANT} {isFour}</div>;
	}
}

I always assumed this was totally fine, especially the bind's.

[marvinhagemeister]

The other day I stumbled across a comment in Preact internals discussion suggesting you can only store values in a component's state, and the reason was something to do with the component forgetting it.

Huh, that would be new to me. I'm curious where you read that. It's perfectly fine to store things on the class instance itself and we even do that ourselves in all of our addons like hooks/signals/etc. Storing things on the class instance is a fundamental aspect of having class components in the first place.

[mikekasprzak]

I thought so. It didn't make sense to me either, especially as I started writing an example and remembered I did it all the time with bind. If I come across it again I'll let you know. I've been jumping around and reading the Preact 11 discussions and other PR's, and chances are it was entirely my own misunderstanding of the conversation.

Thanks again for your help and sanity checking me. 😅